admin管理员组

文章数量:1400161

I have a bootstrap modal that calls the another bootstrap modal. Now the issue is that when I open the second bootstrap modal and close it the first bootstrap modal does not scroll any more. Instead the scroll is obtained by the background main page. What should I need to do here so that when i close the second modal then the first modal gets focused and obtain the scroll as it was before the second modal. 

$('#modalTrigger').on('click', function () {
    setTimeout(function () {
        $('#modalBody').html($('#contentText').html());
    }, 1000);
});

$('#btnPrimaryModalAction').on('click', function () {
    $('#secondaryModal').modal('show'); 
});

Here is the link to JSFIDDLE that contains the two bootstrap modal which defines the situation mentioned above.

I have a bootstrap modal that calls the another bootstrap modal. Now the issue is that when I open the second bootstrap modal and close it the first bootstrap modal does not scroll any more. Instead the scroll is obtained by the background main page. What should I need to do here so that when i close the second modal then the first modal gets focused and obtain the scroll as it was before the second modal. 

$('#modalTrigger').on('click', function () {
    setTimeout(function () {
        $('#modalBody').html($('#contentText').html());
    }, 1000);
});

$('#btnPrimaryModalAction').on('click', function () {
    $('#secondaryModal').modal('show'); 
});

Here is the link to JSFIDDLE that contains the two bootstrap modal which defines the situation mentioned above.

  • javascript
  • jquery
  • html
  • css
  • twitter-bootstrap
Share Improve this question edited Jan 11, 2018 at 23:08 halfer 20.4k19 gold badges109 silver badges202 bronze badges asked Aug 20, 2017 at 16:52 Ankit AgarwalAnkit Agarwal 30.7k5 gold badges40 silver badges63 bronze badges 2
  • did you try to hide first modal before show the second modal? – bhill77 Commented Aug 20, 2017 at 17:15
  • I want both of the modals to appear. – Ankit Agarwal Commented Aug 21, 2017 at 6:32
Add a ment  | 

4 Answers 4

Reset to default 6

Bootstrap modal when shown adds a new modal-open class to your <body> element. And when being closed, it removes the modal-open class.

So you only need to re-apply that class to your <body> element when closing the child modal. Here's the thing:

Add a new custom css class for the modals inside your parent modal.

in my case, I use .child-modal,

/* when using a modal within a modal, add this class on the child modal */
$(document).find('.child-modal').on('hidden.bs.modal', function () {
    console.log('hiding child modal');
    $('body').addClass('modal-open');
});

html

<div class="modal fade" tabindex="-1" role="dialog">
     ...
     <a href="#" data-toggle="modal" data-target="#other_modal" title="Help">
       Open the other modal
     </a>
     ...
</div>
<div class="modal fade child-modal" id="other_modal" tabindex="-1" role="dialog">
   ... other codes here ...
</div>

Your issue has to deal with how bootstrap is 'locking' the body element when a modal is opened. On the body element when the modal is opened that will add the class modal-open. When you open the second modal, nothing happens, but when you close it .. it removes that needed class model-open. you need to add some logic to your js to keep that class there until the last modal is closed. It's not really made to be adding modals inside of modals.

I would suggest try using the the modal event methods you have available to you through bootstrap to circumvent that HERE

Try adding overflow: auto to your first modal and can also refer this

I noticed similar issue when an implementation where i had to open a (child) modal on top of another one (the parent modal). the second (child) modal refuses to scroll after displaying. If this is the case with you, you can try the below. It was what worked for me.

First I detached the parent modal before displaying the child modal, and then attached it (the parent modal) back to the DOM before hiding same when closing the child modal.

//display new request form handler
$("#new-request").on('click',
  function(e) {
    e.preventDefault();
    const button = $(this);

    //Disable keyboard and backdrop functionality for closing the modal
    $("#parent-modal").modal({
      keyboard: false,
      backdrop: "static"
    });


  });

$('#parent-modal').on('click',
  '.js-save-parent',
  function(e) {
    e.preventDefault();

    let parentModal = $("#parent-modal").detach();

    //Disable keyboard and backdrop functionality for closing the modal
    $("#child-modal").modal({
        keyboard: false,
        backdrop: "static"
      })
      .on('hide.bs.modal', () => {
        parentModal.appendTo('.js-dialogs');
        $("#parent-modal").modal("hide");
      });
  });
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<button class="btn btn-primary waves-effect waves-light pull-right" id="new-request" type="button">New Request</button>

<div class="js-dialogs">

  <div id="parent-modal-container">
    <div id="parent-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="parent-modalLabel" aria-hidden="true" style="display: none">
      <div id="modal-dialog" class="modal-dialog">
        <div class="modal-content" id="parent-content">
          <div class="modal-header template">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="parent-modalLabel">New Request</h4>
          </div>
          <div class="modal-body template">
            <div class="m-t-20">
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <div>
                      <input class="form-control" autoplete="off" placeholder="Enter Payment Reference" type="text">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer template">
            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
            <button type="button" id="btn-parent" class="btn btn-primary waves-effect js-save-parent" data-save="save">Verify</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
  </div>

  <div id="child-modal-container">
    <div id="child-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="child-modalLabel" aria-hidden="true" style="display: none">
      <div id="modal-dialog" class="modal-dialog" role="document">
        <div class="modal-content" id="child-content">
          <div class="modal-header template">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="new-request-modalLabel">Request Details</h4>
          </div>
          <div class="modal-body template">
            <div class="m-t-20">
              <div class="row">
                <div class="col-md-12">
                  <label>Sender: </label>
                  <hr />
                  <div class="row">
                    <div class="col-md-4">
                      <div class="form-group">
                        <input class="form-control" autoplete="off" id="SenderFirstName" name="SenderFirstName" placeholder="First Name" tabindex="1" type="text">
                      </div>
                      <div class="form-group">
                        <input class="form-control" autoplete="off" id="SenderCountry" name="SenderCountry" placeholder="Country" tabindex="3" type="text">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <input class="form-control" autoplete="off" id="SenderLastName" name="SenderLastName" placeholder="Last Name" tabindex="2" type="text">
                      </div>
                      <div class="form-group">
                        <input class="form-control" autoplete="off" id="SenderState" name="SenderState" placeholder="State" tabindex="4" type="text">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <input class="form-control" data-parsley-type="digits" required autoplete="off" id="SenderPhone" name="SenderPhone" placeholder="Phone" tabindex="5" type="text">
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="form-group">
                        <textarea class="form-control" autoplete="off" id="SenderAddress" name="SenderAddress" placeholder="Address" tabindex="6"></textarea>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <label>Beneficiary: </label>
                  <hr />
                  <div class="row">
                    <div class="col-md-4">
                      <div class="form-group">
                        <input class="form-control" autoplete="off" id="BeneficiaryFirstName" name="BeneficiaryFirstName" placeholder="First Name" tabindex="7" type="text">
                      </div>
                      <div class="form-group">
                        <input class="form-control" autoplete="off" id="BeneficiaryCountry" name="BeneficiaryCountry" placeholder="Country" tabindex="9" type="text">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <input class="form-control" autoplete="off" id="BeneficiaryLastName" name="BeneficiaryLastName" placeholder="Last Name" tabindex="8" type="text">
                      </div>
                      <div class="form-group">
                        <input class="form-control" autoplete="off" id="BeneficiaryState" name="BeneficiaryState" placeholder="State" tabindex="10" type="text">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <input class="form-control js-parsley" data-parsley-type="digits" required autoplete="off" id="BeneficiaryPhone" name="BeneficiaryPhone" placeholder="Phone" tabindex="11" type="text">
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="form-group">
                        <textarea class="form-control" autoplete="off" id="BeneficiaryAddress" name="BeneficiaryAddress" placeholder="Address" tabindex="12"></textarea>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <label>Finance: </label>
                  <hr />
                  <div class="row">
                    <div class="col-md-4">
                      <div class="form-group">
                        <input class="form-control js-parsley" data-parsley-type="digits" required autoplete="off" id="SendAmount" name="SendAmount" placeholder="Send Amount" type="text">
                      </div>
                      <div class="form-group">
                        <input class="form-control js-parsley" data-parsley-type="digits" required autoplete="off" id="SendCurrency" name="SendCurrency" placeholder="Currency" type="text">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <input class="form-control js-parsley" data-parsley-type="digits" required autoplete="off" id="ReceiveAmount" name="ReceiveAmount" placeholder="Receive Amount" type="text">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <input class="form-control js-parsley" data-parsley-type="digits" required autoplete="off" id="ReceiveCurrency" name="ReceiveCurrency" placeholder="Receive Currency" type="text">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <input class="form-control js-parsley" data-parsley-type="digits" required autoplete="off" id="ExchangeRate" name="ExchangeRate" placeholder="Exchange Rate" type="text">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer template">
            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
            <button type="button" id="btn-new-request" class="btn btn-primary waves-effect js-save-new-request" data-save="save">Save</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
  </div>
</div>

本文标签： javascriptBootstrap modal inside a modal Cannot scroll after closing modalStack Overflow

版权声明：本文标题：javascript - Bootstrap modal inside a modal; Cannot scroll after closing modal - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744190416a2594492.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。