Loading tray: open another modal in modal

Question

Loading tray: open another modal in modal

So, I use this code to open another modal window in the current open modal window:

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>

What happens is that within approximately 500 ms the scrollbar will be duplicated. Probably because the current modal is still disappearing. However, he looks very uneven and stuttering.

I would be grateful for any suggestions to solve this problem.

Also, is the way to create this in an onclick event unprofessional?

I am working with bootstrap version 3.0.

Edit: I think it is necessary to reduce the fading time of the modal. How is this possible?

+80

javascript jquery twitter-bootstrap twitter-bootstrap-3 modal-dialog

AlexioVay Oct 22 '13 at 20:54 on

source share

20 answers

jayeshkv · Answer 1

data-dismiss makes the current modal window strength closed

data-toggle opens new href modal content inside it

 <a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

or

 <a data-dismiss="modal" onclick="call the new div here">Click</a>

let us know if that works.

You can also take a look at Modal documentation.

H Dog · Answer 2 · 2015-06-16 19:28

My solution does not close lower modal ones, but really stacks on top of it. It saves the scroll behavior correctly. Tested in Bootstrap 3. In order for the modals to stack as expected, you need them to be ordered in your Html markup from lowest to highest.

 $(document).on('hidden.bs.modal', function (event) { if ($('.modal:visible').length) { $('body').addClass('modal-open'); } });

UPDATE: when you have complex modal files, all backgrounds are displayed below the lowest modal. You can fix this by adding the following CSS:

 .modal-backdrop { visibility: hidden !important; } .modal.in { background-color: rgba(0,0,0,0.5); }

This will give the appearance of a modal background below the topmost visible modal. Thus, it highlights your bottom modals below.

suhailvs · Answer 3 · 2014-03-18 04:12

To open another modal window in the current open modal window,
you can use bootstrap-modal

bootstrap-modal DEMO

Giraldi · Answer 4 · 2015-05-15 03:02

In fact, you detect when the old modal closes by raising the hidden.bs.modal event:

  $('.yourButton').click(function(e){ e.preventDefault(); $('#yourFirstModal') .modal('hide') .on('hidden.bs.modal', function (e) { $('#yourSecondModal').modal('show'); $(this).off('hidden.bs.modal'); // Remove the 'on' event binding }); });

For more information: http://getbootstrap.com/javascript/#modals-events

Elon Gomes Vieira · Answer 5 · 2015-09-10 23:34

try it

 <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button> <div id="test1" class="modal fade" role="dialog" style="z-index: 1400;"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test2">Open Modal 2</button> </div> </div> </div> </div> <div id="test2" class="modal fade" role="dialog" style="z-index: 1600;"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> content </div> </div> </div> </div> </body> </html>

RedDevil2015 · Answer 6 · 2016-08-27 07:52

Modalities in modal mode:

 $('.modal-child').on('show.bs.modal', function () { var modalParent = $(this).attr('data-modal-parent'); $(modalParent).css('opacity', 0); }); $('.modal-child').on('hidden.bs.modal', function () { var modalParent = $(this).attr('data-modal-parent'); $(modalParent).css('opacity', 1); });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a> <div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a> <a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a> </div> </div> </div> </div> <div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header 1</h4> </div> <div class="modal-body"> <p>Two modal body…1</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button> </div> </div> </div> </div> <div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header 2</h4> </div> <div class="modal-body"> <p>Modal body…2</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button> </div> </div> </div> </div>

Renier Strydom · Answer 7 · 2015-05-20 23:58

Work on a project that has many modals that invoke other modalities and a few guys from HTML who may not know to initiate it each time for each button. I came to a similar conclusion as @gmaggio, despite the fact that I went further first.

EDIT: now supports modals called through javascript.

EDIT: now opens the scroll mode from another mod.

 $(document).on('show.bs.modal', function (event) { if (!event.relatedTarget) { $('.modal').not(event.target).modal('hide'); }; if ($(event.relatedTarget).parents('.modal').length > 0) { $(event.relatedTarget).parents('.modal').modal('hide'); }; }); $(document).on('shown.bs.modal', function (event) { if ($('body').hasClass('modal-open') == false) { $('body').addClass('modal-open'); }; });

Just place the modal call button in the usual way, and if it is raised to be inside the modal, it first closes the current one before opening the one that is specified in the data target. Please note that relatedTarget provided by Bootstrap.

I also added the following to smooth out the attenuation: I am sure that more can be done.

 .modal-backdrop.fade + .modal-backdrop.fade { transition: opacity 0.40s linear 0s; }

CrandellWS · Answer 8 · 2014-06-12 04:28

Twitter docs says special code is required ...

This works without additional JavaScript, although custom CSS would be highly recommended ...

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content bg-info"> <div class="modal-header btn-info"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="modalOneLabel">modalOne</h4> </div> <div id="thismodalOne" class="modal-body bg-info"> <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample"> Launch demo modal </button> <div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true"> <h3>EXAMPLE</h3> </div> </div> <div class="modal-footer btn-info" id="woModalFoot"> <button type="button" class="btn btn-info" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- End Form Modals -->

Zim · Answer 9 · 2018-08-31 11:37

2018 Update - Using Bootstrap 4

I found that most of the answers seem to contain a lot of jQuery unnecessary. To open a modal from another modal, simply use the events provided by Bootstrap, such as "show.bs.modal". You may also want some CSS for handling background overlays. Here are 3 open modal options from another scenario ...

Open a modal from another modal (leave the 1st modal open)

 <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div><div class="container"></div> <div class="modal-body"> ... <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a> </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> </div> </div> </div> </div> <div class="modal" id="myModal2" data-backdrop="static"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">2nd Modal title</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div><div class="container"></div> <div class="modal-body"> .. </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> <a href="#" class="btn btn-primary">Save changes</a> </div> </div> </div> </div>

In this case, the potential problem is that the background from the 2nd modal hides the 1st modal. To prevent this, do a 2nd modal data-backdrop="static" and add some CSS to fix the background z-indexes.

 /* modal backdrop fix */ .modal:nth-of-type(even) { z-index: 1052 !important; } .modal-backdrop.show:nth-of-type(even) { z-index: 1051 !important; }

https://www.codeply.com/go/NiFzSCukVl

Open modal from another modal (close 1st modal)

This is similar to the scenario described above, but since we close the 1st mod when the 2nd opens, there is no need to fix the CSS background. A simple function that processes the event of 2 show.bs.modal show.bs.modal closes the 1st modal.

$ ("# myModal2"). on ('show.bs.modal', function (e) {$ ("# MyModal1") modal ("hide").});

https://www.codeply.com/go/ejaUJ4YANz

Open modal inside another modal

The last scenario of multiple modals opens the 2nd modal inside the 1st modal. In this case, the markup for the second is placed inside the first. No extra CSS or jQuery required.

 <div class="modal" id="myModal1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="container"></div> <div class="modal-body"> ... <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a> </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> </div> </div> </div> <div class="modal" id="myModal2"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">2nd Modal title</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="container"></div> <div class="modal-body"> ... </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> <a href="#" class="btn btn-primary">Save changes</a> </div> </div> </div> </div> </div>

https://www.codeply.com/go/iSbjqubiyn

Christian · Answer 10 · 2015-10-20 12:10

Try the following:

 // Hide the login modal $('#login').modal('hide'); // Show the next modal after the fade effect is finished setTimeout(function(){ $('#lost').modal('show'); }, 500);

This simple hack works for me.

helloroy · Answer 11 · 2017-05-15 07:13

For those using bootstrap 4 https://jsfiddle.net/helloroy/tmm9juoh/

 var modal_lv = 0; $('.modal').on('shown.bs.modal', function (e) { $('.modal-backdrop:last').css('zIndex',1051+modal_lv); $(e.currentTarget).css('zIndex',1052+modal_lv); modal_lv++ }); $('.modal').on('hidden.bs.modal', function (e) { modal_lv-- });

 <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a"> Launch demo modal a </button> <div class="modal fade" id="modal-a" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b"> Launch another demo modal b </button> <p class="my-3"> Not good for fade In. </p> <p class="my-3"> who help to improve? </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div class="modal fade" id="modal-b" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c"> Launch another demo modal c </button> <p class="my-3"> But good enough for static modal </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div class="modal" id="modal-c" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p class="my-3">That all.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

smartbloke · Answer 12 · 2017-12-14 15:50

For bootstrap 4, to expand on @helloroy's answer, I used the following:

 var modal_lv = 0 ; $('body').on('shown.bs.modal', function(e) { if ( modal_lv > 0 ) { $('.modal-backdrop:last').css('zIndex',1050+modal_lv) ; $(e.target).css('zIndex',1051+modal_lv) ; } modal_lv++ ; }).on('hidden.bs.modal', function() { if ( modal_lv > 0 ) modal_lv-- ; });

The advantage of the above is that it will not have any effect, if there is only one modal, it only works for multiples. Secondly, he delegates processing to the body to ensure that future modalities that are not currently created are still satisfied.

Update

Switching to the combined js / css solution improves the look - the fade animation continues to work in the background;

 var modal_lv = 0 ; $('body').on('show.bs.modal', function(e) { if ( modal_lv > 0 ) $(e.target).css('zIndex',1051+modal_lv) ; modal_lv++ ; }).on('hidden.bs.modal', function() { if ( modal_lv > 0 ) modal_lv-- ; });

in combination with the following css; -

 .modal-backdrop ~ .modal-backdrop { z-index : 1051 ; } .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop { z-index : 1052 ; } .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop { z-index : 1053 ; }

This will handle modalities nested to 4 depths, which is more than what I need.

user3675926 · Answer 13 · 2014-05-26 10:02

My code and work is such a good use of data-leave

 <li class="step1"> <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1"> <p class="text-label">Step 1</p> <p class="text-text">Plan your Regime</p> </a> </li> <li class="step2"> <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2"> <p class="text-label">Step 2</p> <p class="text-text">Plan your menu</p> </a> </li> <li class="step3 active"> <a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3"> <p class="text-label">Step 3</p> <p class="text-text">This Step is Undone.</p> </a> </li>

teefars · Answer 14 · 2015-09-14 22:05

I also had problems with my scrollable mods, so I did something like this:

  $('.modal').on('shown.bs.modal', function () { $('body').addClass('modal-open'); // BS adds some padding-right to acomodate the scrollbar at right $('body').removeAttr('style'); }) $(".modal [data-toggle='modal']").click(function(){ $(this).closest(".modal").modal('hide'); });

It will be used for any modal modality that appears. Please note that the first one is closed, so the second one may appear. No changes to the structure of Bootstrap.

Dylan Hayes · Answer 15 · 2016-08-24 17:00

I went a completely different way, I decided to "De-Nest" them. Maybe someone will find it convenient ...

 var $m1 = $('#Modal1'); var $innermodal = $m1.find(".modal"); //get reference to nested modal $m1.after($innermodal); // snatch it out of inner modal and put it after.

Abhishek · Answer 16 · 2016-06-29 08:19

Close the first Bootstrap modem and dynamically open a new modal.

 $('#Modal_One').modal('hide'); setTimeout(function () { $('#Modal_New').modal({ backdrop: 'dynamic', keyboard: true }); }, 500);

Carlo · Answer 17 · 2018-11-10 04:12

Why not just change the contents of the modal body?

  window.switchContent = function(myFile){ $('.modal-body').load(myFile); };

In the modal, just put the link or button

  <a href="Javascript: switchContent('myFile.html'); return false;"> click here to load another file</a>

If you just want to switch between the two mods:

  window.switchModal = function(){ $('#myModal-1').modal('hide'); setTimeout(function(){ $('#myModal-2').modal(); }, 500); // the setTimeout avoid all problems with scrollbars };

In the modal, just put the link or button

  <a href="Javascript: switchModal(); return false;"> click here to switch to the second modal</a>

Adam · Answer 18 · 2018-10-23 10:22

The answer given by H Dog is great, but this approach actually gave me some modal flicker in Internet Explorer 11. Bootstrap first hides the modal by removing the 'modal-open' class, and then (using the H Dogs solution) we add the class' again modal-open '. I suspect this somehow causes a flicker that I saw, possibly due to the slow rendering of html / css.

Another solution is to prevent bootstrapping when removing the 'modal-open' class from the body element. Using bootloader 3.3.7, this overriding of the hideModal internal function works fine for me.

 $.fn.modal.Constructor.prototype.hideModal = function () { var that = this this.$element.hide() this.backdrop(function () { if ($(".modal:visible").length === 0) { that.$body.removeClass('modal-open') } that.resetAdjustments() that.resetScrollbar() that.$element.trigger('hidden.bs.modal') }) }

In this redefinition, the 'modal-open' class is deleted only when there are no visible modals on the screen. And you exclude the possibility of deleting and adding one class to the body element.

Just enable override after loading.

Rakesh Vadnal · Answer 19 · 2019-08-12 21:05

try it:

 $('.modal').on('hidden.bs.modal', function () { //If there are any visible if($(".modal:visible").length > 0) { //Slap the class on it (wait a moment for things to settle) setTimeout(function() { $('body').addClass('modal-open'); },100) } });

Alex Sh. · Answer 20 · 2017-05-30 16:11

 $(document).on('hidden.bs.modal', function (event) { if ($('.modal:visible').length) { $('body').addClass('modal-open'); } });

Loading tray: open another modal in modal

More articles: