Bootstrap Open Another Modal in Modal

Question

So  I m using this code to open another modal window in a current opened modal window    lt a onclick       login   modal  hide       lost   modal  show      href     gt Click lt  a gt    What happens is  that for like 500ms the scrollbar will duplicate  I guess because the current modal is still fading out  However it looks very un-smooth and stuttering   I would appreciate any suggestions to solve this issue    Also  is the way building this in an onclick-event unprofessional   I m working with the bootstrap version 3 0   Edit  I guess it s neccesary to reduce the time of fading out a modal  How is this possible

User · Answer

You can actually detect when the old modal closes by calling 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 info: http://getbootstrap.com/javascript/#modals-events

User · Answer

data-dismiss makes the current modal window force close data-toggle opens up a new modal with the href content inside it  lt a data-dismiss  quot modal quot  data-toggle  quot modal quot  href  quot  lost quot  gt Click lt  a gt   or  lt a data-dismiss  quot modal quot  onclick  quot call the new div here quot  gt Click lt  a gt   do let us know if it works   You might  also want to take a look around the Modal Documentation

User · Answer

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  gt  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  gt  0           modal lv--         The advantage of the above is that it won t have any effect when there is only one modal  it only kicks in for multiples  Secondly  it delegates the handling to the body to ensure future modals which are not currently generated are still catered for   Update  Moving to a js css combined solution improves the look - the fade animation continues to work on the backdrop -  var modal lv   0      body   on  show bs modal   function e        if   modal lv  gt  0             e target  css  zIndex  1051 modal lv        modal lv        on  hidden bs modal   function         if   modal lv  gt  0           modal lv--         combined 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 modals nested up to 4 deep which is more than I need

User · Answer

try this       modal   on  hidden bs modal   function        If there are any visible   if     modal visible   length  gt  0            Slap the class on it  wait a moment for things to settle        setTimeout function                  body   addClass  modal-open            100

User · Answer

Update for 2019 -- Using Bootstrap 4 I found most of the answers seem to have a lot of unnecessary jQuery  To open a modal from another modal can be done simply by using the events that Bootstrap provides such as show bs modal  You may also want some CSS to handle the backdrop overlays  Here are the 3 open modal from another scenarios    Open modal from another modal  keep 1st modal open   lt a data-toggle  quot modal quot  href  quot  myModal quot  class  quot btn btn-primary quot  gt Launch modal lt  a gt    lt div class  quot modal quot  id  quot myModal quot  gt           lt div class  quot modal-dialog quot  gt             lt div class  quot modal-content quot  gt               lt div class  quot modal-header quot  gt                 lt h4 class  quot modal-title quot  gt Modal title lt  h4 gt                     lt button type  quot button quot  class  quot close quot  data-dismiss  quot modal quot  gt    lt  button gt               lt  div gt  lt div class  quot container quot  gt  lt  div gt               lt div class  quot modal-body quot  gt                                   lt a data-toggle  quot modal quot  href  quot  myModal2 quot  class  quot btn btn-primary quot  gt Open modal2 lt  a gt               lt  div gt               lt div class  quot modal-footer quot  gt                 lt a href  quot   quot  data-dismiss  quot modal quot  class  quot btn quot  gt Close lt  a gt               lt  div gt             lt  div gt           lt  div gt   lt  div gt   lt div class  quot modal quot  id  quot myModal2 quot  data-backdrop  quot static quot  gt           lt div class  quot modal-dialog quot  gt             lt div class  quot modal-content quot  gt               lt div class  quot modal-header quot  gt                 lt h4 class  quot modal-title quot  gt 2nd Modal title lt  h4 gt                 lt button type  quot button quot  class  quot close quot  data-dismiss  quot modal quot  gt    lt  button gt               lt  div gt  lt div class  quot container quot  gt  lt  div gt               lt div class  quot modal-body quot  gt                                lt  div gt               lt div class  quot modal-footer quot  gt                 lt a href  quot   quot  data-dismiss  quot modal quot  class  quot btn quot  gt Close lt  a gt                 lt a href  quot   quot  class  quot btn btn-primary quot  gt Save changes lt  a gt               lt  div gt             lt  div gt           lt  div gt   lt  div gt   A potential issue in this case is that the backdrop from the 2nd modal hides the 1st modal  To prevent this  make the 2nd modal data-backdrop  quot static quot   and add some CSS to fix the z-indexes of the backdrops       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 above scenario  but since we are closing the 1st modal when the 2nd is opened  there is no need for the backdrop CSS fix  A simple function that handles the 2nd modals show bs modal event closes the 1st modal     quot  myModal2 quot   on  show bs modal   function  e           quot  myModal1 quot   modal  quot hide quot         https   codeply com go ejaUJ4YANz   Open modal inside another modal The last multiple modals scenario is opening the 2nd modal inside the 1st modal  In this case the markup for the 2nd is placed inside the 1st  No extra CSS or jQuery is needed   lt div class  quot modal quot  id  quot myModal1 quot  gt       lt div class  quot modal-dialog quot  gt           lt div class  quot modal-content quot  gt               lt div class  quot modal-header quot  gt                   lt h4 class  quot modal-title quot  gt Modal title lt  h4 gt                   lt button type  quot button quot  class  quot close quot  data-dismiss  quot modal quot  aria-hidden  quot true quot  gt    lt  button gt               lt  div gt               lt div class  quot container quot  gt  lt  div gt               lt div class  quot modal-body quot  gt                                       lt a data-toggle  quot modal quot  href  quot  myModal2 quot  class  quot btn btn-primary quot  gt Launch modal 2 lt  a gt               lt  div gt               lt div class  quot modal-footer quot  gt                   lt a href  quot   quot  data-dismiss  quot modal quot  class  quot btn quot  gt Close lt  a gt               lt  div gt           lt  div gt       lt  div gt        lt div class  quot modal quot  id  quot myModal2 quot  gt           lt div class  quot modal-dialog quot  gt               lt div class  quot modal-content quot  gt                   lt div class  quot modal-header quot  gt                       lt h4 class  quot modal-title quot  gt 2nd Modal title lt  h4 gt                       lt button type  quot button quot  class  quot close quot  data-dismiss  quot modal quot  aria-hidden  quot true quot  gt    lt  button gt                   lt  div gt                   lt div class  quot container quot  gt  lt  div gt                   lt div class  quot modal-body quot  gt                                           lt  div gt                   lt div class  quot modal-footer quot  gt                       lt a href  quot   quot  data-dismiss  quot modal quot  class  quot btn quot  gt Close lt  a gt                       lt a href  quot   quot  class  quot btn btn-primary quot  gt Save changes lt  a gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt   https   codeply com go iSbjqubiyn

User · Answer

Why not just change the content of the modal body       window switchContent   function myFile               modal-body   load myFile            In the modal just put a link or a button       lt a href  Javascript  switchContent  myFile html    return false   gt       click here to load another file lt  a gt    If you just want to switch beetween 2 modals       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 a link or a button       lt a href  Javascript  switchModal    return false   gt       click here to switch to the second modal lt  a gt

User · Answer

Twitter docs says custom code is required     This works with no extra JavaScript   though  custom CSS would be highly recommended      x000D   x000D   lt link href  http   netdna bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src    netdna bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   lt  -- Button trigger modal -- gt  x000D       lt button class  btn btn-primary btn-lg  data-toggle  modal  data-target   modalOneModal  gt  x000D        Launch demo modal x000D       lt  button gt   x000D               lt  -- Modal -- gt  x000D               lt div class  modal fade bg-info  id  modalOneModal  tabindex  -1  role  dialog  aria-labelledby  modalOneLabel  aria-hidden  true  gt  x000D       x000D                 lt div class  modal-dialog  gt  x000D             x000D                   lt div class  modal-content  bg-info  gt  x000D                     lt div class  modal-header btn-info  gt  x000D                       lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt  x000D                       lt h4 class  modal-title  id  modalOneLabel  gt modalOne lt  h4 gt  x000D                     lt  div gt  x000D                     lt div id  thismodalOne  class  modal-body bg-info  gt  x000D                   x000D                   x000D                 lt  -- Button trigger modal -- gt  x000D       lt button class  btn btn-primary btn-lg  data-toggle  modal  data-target   twoModalsExample  gt  x000D        Launch demo modal x000D       lt  button gt  x000D                x000D                       lt div class  modal fade bg-info  id  twoModalsExample  style  overflow auto  tabindex  -1  role  dialog  aria-hidden  true  gt  x000D                   lt h3 gt EXAMPLE lt  h3 gt  x000D               lt  div gt  x000D                     lt  div gt  x000D                     lt div class  modal-footer btn-info  id  woModalFoot  gt  x000D                       lt button type  button  class  btn btn-info  data-dismiss  modal  gt Close lt  button gt  x000D                     lt  div gt  x000D                   lt  div gt  x000D                 lt  div gt  x000D               lt  div gt  x000D       lt  -- End Form Modals -- gt  x000D   x000D   x000D

User · Answer

For someone who use bootstrap 4 https   jsfiddle net helloroy tmm9juoh    x000D   x000D  var modal lv   0  x000D      modal   on  shown bs modal   function  e    x000D          modal-backdrop last   css  zIndex  1051 modal lv   x000D        e currentTarget  css  zIndex  1052 modal lv   x000D      modal lv   x000D      x000D   x000D      modal   on  hidden bs modal   function  e    x000D      modal lv-- x000D      x000D   lt script src  https   code jquery com jquery-3 1 1 slim min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs tether 1 4 0 js tether min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt button type  button  class  btn btn-primary  data-toggle  modal  data-target   modal-a  gt  x000D    Launch demo modal a x000D   lt  button gt  x000D   x000D   lt div class  modal fade  id  modal-a  tabindex  -1  role  dialog  aria-labelledby  exampleModalLabel  aria-hidden  true  gt  x000D     lt div class  modal-dialog  role  document  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt h5 class  modal-title  id  exampleModalLabel  gt Modal title lt  h5 gt  x000D           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  x000D             lt span aria-hidden  true  gt  amp times  lt  span gt  x000D           lt  button gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D           lt button type  button  class  btn btn-primary  data-toggle  modal  data-target   modal-b  gt  x000D    Launch another demo modal b x000D   lt  button gt  x000D   lt p class  my-3  gt  x000D  Not good for fade In  x000D   lt  p gt  x000D   lt p class  my-3  gt  x000D  who help to improve  x000D   lt  p gt  x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-secondary  data-dismiss  modal  gt Close lt  button gt  x000D           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  modal fade  id  modal-b  tabindex  -1  role  dialog  aria-labelledby  exampleModalLabel  aria-hidden  true  gt  x000D     lt div class  modal-dialog  role  document  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt h5 class  modal-title  id  exampleModalLabel  gt Modal title lt  h5 gt  x000D           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  x000D             lt span aria-hidden  true  gt  amp times  lt  span gt  x000D           lt  button gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D           lt button type  button  class  btn btn-primary  data-toggle  modal  data-target   modal-c  gt  x000D    Launch another demo modal c x000D   lt  button gt  x000D   lt p class  my-3  gt  x000D  But good enough for static modal x000D   lt  p gt  x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-secondary  data-dismiss  modal  gt Close lt  button gt  x000D           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D   lt div class  modal  id  modal-c  tabindex  -1  role  dialog  aria-labelledby  exampleModalLabel  aria-hidden  true  gt  x000D     lt div class  modal-dialog  role  document  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt h5 class  modal-title  id  exampleModalLabel  gt Modal title lt  h5 gt  x000D           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  x000D             lt span aria-hidden  true  gt  amp times  lt  span gt  x000D           lt  button gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D   lt p class  my-3  gt That s all  lt  p gt  x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-secondary  data-dismiss  modal  gt Close lt  button gt  x000D           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The answer given by H Dog is great  but this approach was actually giving me some modal flicker in Internet Explorer 11   Bootstrap will first hide the modal removing the  modal-open  class  and then  using H Dogs solution  we add the  modal-open  class again  I suspect this is somehow causing the flicker I was seeing  maybe due to some slow HTML CSS rendering   Another solution is to prevent bootstrap in removing the  modal-open  class from the body element in the first place   Using Bootstrap 3 3 7  this override of the internal hideModal function works perfectly 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 override  the  modal-open  class is only removed when there are no visible modals on the screen  And you prevent one frame of removing and adding a class to the body element   Just include the override after bootstrap have been loaded

User · Answer

x000D   x000D    document  on  hidden bs modal   function  event    x000D    if      modal visible   length    x000D         body   addClass  modal-open    x000D      x000D      x000D   x000D   x000D

User · Answer

My solution does not close the lower modal  but truly stacks on top of it   It preserves scrolling behavior correctly   Tested in Bootstrap 3   For modals to stack as expected  you need to have them ordered in your Html markup from lowest to highest    x000D   x000D    document  on  hidden bs modal   function  event    x000D    if      modal visible   length    x000D         body   addClass  modal-open    x000D      x000D      x000D   x000D   x000D    UPDATE  When you have stacked modals  all the backdrops appear below the lowermost modal   You can fix that 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 backdrop below the topmost visible modal   That way it grays out your lower modals underneath

User · Answer

To open another modal window in a current opened modal window  you can use bootstrap-modal  bootstrap-modal DEMO

User · Answer

This thread is old  but for those who come from google  Ive come with a solutions that is hybrid from all the answers Ive found on the net  This will make sure level class is being added    document  on  show bs modal     modal   function  event        this  addClass  modal-level-      modal visible   length          Inside my SCSS Ive wrote a rule that supports main modal and 10 on top  10 because from z-index  1060 popover takes place   you can add levels count inside  variables scss if you want   for  level from 0 through 10      modal-level-   level        z-index   zindex-modal    level        amp     modal-backdrop         z-index   zindex-modal    level - 1               Do not forget that you cannot have modal inside modal as their controls will be messed up  In my case all my modals were at the end of body  And finally as members below also mentions this  after closing one modal  you need to keep modal-open class on body    document  on  hidden bs modal   function  e      if      modal visible   length  gt  0           body   addClass  modal-open

User · Answer

Working on a project that has a lot of modals calling other modals and a few HTML guys that might not know to initiate it everytime for each button  Came to a similar conclusion as  gmaggio  begrudgingly after going the long way around first   EDIT  Now supports modals called via javascript   EDIT  Opening a scrolling modal from another modal now works     document  on  show bs modal   function  event        if   event relatedTarget                modal   not event target  modal  hide               if    event relatedTarget  parents   modal   length  gt  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 calling button in as normal  and if it is picked up to be inside a modal  it will close the current one first before opening the one specified in data-target  Note that relatedTarget is provided by Bootstrap   I also added the following to smooth out the fading a bit  I am sure more can be done though    modal-backdrop fade    modal-backdrop fade       transition  opacity 0 40s linear 0s

User · Answer

Close the first Bootstrap modal and open the new modal dynamically       Modal One   modal  hide    setTimeout function            Modal New   modal       backdrop   dynamic       keyboard  true          500

User · Answer

I went kind of a different route all together  I decided to  De-Nest  them  Maybe someone will find this handy     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

User · Answer

Modals in Modal    x000D   x000D      modal-child   on  show bs modal   function      x000D      var modalParent     this  attr  data-modal-parent    x000D        modalParent  css  opacity   0   x000D      x000D    x000D      modal-child   on  hidden bs modal   function      x000D      var modalParent     this  attr  data-modal-parent    x000D        modalParent  css  opacity   1   x000D      x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt a href   myModal  role  button  class  btn btn-primary  data-toggle  modal  gt Modals in Modal lt  a gt  x000D   x000D   x000D   lt div id  myModal  class  modal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt  x000D       lt div class  modal-dialog  gt  x000D           lt  -- Modal content-- gt  x000D           lt div class  modal-content  gt  x000D               lt div class  modal-header  gt  x000D                x000D                   lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt  x000D                   lt h4 class  modal-title  gt Modal Header lt  h4 gt  x000D               lt  div gt  x000D               lt div class  modal-body  gt  x000D                   lt a href   myModal1  role  button  class  btn btn-primary  data-toggle  modal  gt Launch other modal 1 lt  a gt  x000D                   lt a href   myModal2  role  button  class  btn btn-primary  data-toggle  modal  gt Launch other modal 2 lt  a gt  x000D               lt  div gt  x000D   x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   lt 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  gt  x000D       lt div class  modal-dialog  gt  x000D           lt  -- Modal content-- gt  x000D           lt div class  modal-content  gt  x000D               lt div class  modal-header  gt  x000D                   lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt  x000D                   lt h4 class  modal-title  gt Modal Header 1 lt  h4 gt  x000D               lt  div gt  x000D               lt div class  modal-body  gt  x000D                   lt p gt Two modal body   1 lt  p gt  x000D               lt  div gt  x000D               lt div class  modal-footer  gt  x000D                   lt button class  btn btn-default  data-dismiss  modal  data-dismiss  modal  aria-hidden  true  gt Cancel lt  button gt  x000D               lt  div gt  x000D   x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   lt 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  gt  x000D       lt div class  modal-dialog  gt  x000D           lt  -- Modal content-- gt  x000D           lt div class  modal-content  gt  x000D               lt div class  modal-header  gt  x000D                   x000D                   lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt  x000D                   lt h4 class  modal-title  gt Modal Header 2 lt  h4 gt  x000D               lt  div gt  x000D               lt div class  modal-body  gt  x000D                   lt p gt Modal body   2 lt  p gt  x000D               lt  div gt  x000D               lt div class  modal-footer  gt  x000D                   lt button class  btn btn-default  data-dismiss  modal  data-dismiss  modal  aria-hidden  true  gt Cancel lt  button gt  x000D               lt  div gt  x000D   x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

try this   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D     lt title gt  lt  title gt  x000D     lt meta charset  utf-8  gt  x000D     lt link rel  stylesheet  href  http   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  gt  x000D     lt script src  https   ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt  x000D     lt script src  http   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D     lt button type  button  class  btn btn-info btn-lg  data-toggle  modal  data-target   test1  gt Open Modal 1  lt  button gt  x000D   x000D   x000D   x000D   lt div id  test1  class  modal fade  role  dialog  style  z-index  1400   gt  x000D     lt div class  modal-dialog  gt  x000D       lt  -- Modal content-- gt  x000D       lt div class  modal-content  gt  x000D         x000D         lt div class  modal-body  gt  x000D          lt button type  button  class  btn btn-info btn-lg  data-toggle  modal       data-target   test2  gt Open Modal 2 lt  button gt  x000D          x000D         lt  div gt        x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt div id  test2  class  modal fade  role  dialog  style  z-index  1600   gt  x000D     lt div class  modal-dialog  gt  x000D       lt  -- Modal content-- gt  x000D       lt div class  modal-content  gt  x000D         x000D         lt div class  modal-body  gt  x000D          x000D          content x000D          x000D         lt  div gt        x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D     x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

My code works well using data-dismiss    lt li class  step1  gt       lt a href     class  button-popup  data-dismiss  modal  data-toggle  modal  data-target   lightbox1  gt           lt p class  text-label  gt Step 1 lt  p gt           lt p class  text-text  gt Plan your Regime lt  p gt       lt  a gt    lt  li gt   lt li class  step2  gt       lt a href     class  button-popup  data-dismiss  modal  data-toggle  modal  data-target   lightbox2  gt           lt p class  text-label  gt Step 2 lt  p gt           lt p class  text-text  gt Plan your menu lt  p gt       lt  a gt   lt  li gt   lt li class  step3 active  gt       lt a href     class  button-popup  data-toggle  modal  data-dismiss  modal  data-target   lightbox3  gt           lt p class  text-label  gt Step 3 lt  p gt           lt p class  text-text  gt This Step is Undone  lt  p gt       lt  a gt   lt  li gt

User · Answer

Try this      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

User · Answer

I also had some trouble with my scrollable modals  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 serve for any modal whithin a modal that comes to appear  Note that the first its closed so the second can appear  No changes in the Bootstrap structure

[javascript] Bootstrap: Open Another Modal in Modal

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

[javascript] Bootstrap: Open Another Modal in Modal

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to modal-dialog

Examples related to twitter-bootstrap-3