Bootstrap modal close current open new

Question

I have looked for a while  but I can t find a solution for this  I want the following    Open an URL inside a Bootstrap modal  I have this working off course  So the content is loaded dynamically  When an user pushes a button inside this modal  I want the current modal to hide  and immediately after that  I want a new modal to open with the new URL  which the user clicked on   This content of the 2nd modal is also loaded dynamically  If the user then closes that 2nd modal  the first modal must come back again    I have been staring at this for days  hope someone can help me   Thanks in advance

User · Answer

data-dismiss  modal     it is used to close the existing opened  model  you can set it to the new model

User · Answer

Without seeing specific code  it s difficult to give you a precise answer  However  from the Bootstrap docs  you can hide the modal like this        myModal   modal  hide     Then  show another modal once it s hidden       myModal   on  hidden bs modal   function           Load up a new modal          myModalNew   modal  show        You re going to have to find a way to push the URL to the new modal window  but I d assume that d be trivial  Without seeing the code it s hard to give an example of that

User · Answer

None of the answers helped me since I wanted to achieve something which was exactly the same as mentioned in the question   I have created a jQuery plugin for this purpose         Raj  This file is responsible to display the modals in a stacked fashion  Example     1  User displays modal A    2  User now wants to display modal B - gt  This will not work by default if a modal is already displayed    3  User dismisses modal B    4  Modal A should now be displayed automatically - gt  This does not happen all by itself         Trying to solve problem for  http   stackoverflow com questions 18253972 bootstrap-modal-close-current-open-new          var StackedModalNamespace   StackedModalNamespace     function         var  modalObjectsStack           return           modalStack  function                 return  modalObjectsStack                     currentTop  function                 var topModal   null              if  StackedModalNamespace modalStack   length                    topModal   StackedModalNamespace modalStack   StackedModalNamespace modalStack   length-1                             return topModal                             http   stackoverflow com a 13992290 260665 difference between   fn extend and   extend jQuery fn extend          https   api jquery com jquery fn extend      showStackedModal  function             var topModal   StackedModalNamespace currentTop            StackedModalNamespace modalStack   push this           this off  hidden bs modal   on  hidden bs modal   function         Subscription to the hide event             var currentTop   StackedModalNamespace currentTop                if    this  is currentTop                        4  Unwinding - If user has dismissed the top most modal we need to remove it form the stack and display the now new top modal  which happens in point 3 below                  StackedModalNamespace modalStack   pop                              var newTop   StackedModalNamespace currentTop                if  newTop                       3  Display the new top modal  since the existing modal would have been hidden by point 2 now                  newTop modal  show                                      if  topModal                   2  If some modal is displayed  lets hide it             topModal modal  hide              else                  1  If no modal is displayed  just display the modal             this modal  show                           Working Fiddle for reference  JSFiddle  https   jsfiddle net gumdal 67hzgp5c   You just have to invoke with my new API  showStackedModal    instead of just  modal  show     The hide part can still be the same as before and the stacked approach of showing  amp  hiding the modals are automatically taken care

User · Answer

In first modal   replace modal dismiss link in footer with close link below    lt div class  modal-footer  gt         lt a href      data-dismiss  modal  class  btn btn-primary  data-toggle  modal  data-target   second model id  gt Close lt  a gt   lt  div gt    In second modal   Then second modal replace top div with below div tag    lt div class  modal fade  tabindex  -1  role  dialog  aria-labelledby  add text for disabled people here  aria-hidden  true  id  second model id  gt

User · Answer

I use this method     function       return     modal   on  show bs modal   function         var curModal      curModal   this          modal   each function           if  this     curModal              this  modal  hide

User · Answer

Simple and elegant solution for BootStrap 3 x  The same modal can be reused in this way       myModal   modal  hide        myModal   on  hidden bs modal   function  e           myModal   html data          myModal   modal          do something more

User · Answer

If you want to close the previously opened modal while opening the new modal then you must do it from javascript jquery by first closing the current open modal and then give a 400ms timeout to allow it to close and then open the new modal like below code         currentModal   modal  hide     setTimeout function              your code to be executed after 200 msecond             newModal   modal              backdrop   static   to disable click close          400    delay in miliseconds  1000 1second   If you try to do it with the data-dismiss  modal  then it will have the scroll issue as mentioned by  gravity and  kuldeep in comments

User · Answer

With BootStrap 3  you can try this -  var visible modal   jQuery   modal in   attr  id       modalID or undefined if  visible modal       modal is active     jQuery       visible modal  modal  hide       close modal     Tested to work with  http   getbootstrap com javascript  modals  click on  Launch Demo Modal  first

User · Answer

As mentioned above In the html in the same button  you can ask to close the current modal with data-dismiss and open a new modal directly with data-target    lt button class  btn btn-success   data-toggle  modal   data-target   modalRegistration   data-dismiss  modal  gt Register lt  button gt   But this will cause scroll-bar disappear and you will notice that if the second modal was longer that the first one   So the solution is to add the following style in the modal inline style      Style    overflow-y   scroll

User · Answer

I know this is a late answer  but it might be useful   Here s a proper and clean way to get this done  as  karima s mentioned above  You can actually fire two functions at once  trigger and dismiss the modal   HTML Markup    lt  -- Button trigger modal -- gt   lt ANY data-toggle  modal  data-target  TARGET  gt     lt  ANY gt    lt div class  modal fade  id  SELECTOR  tabindex  -1  gt     lt div class  modal-dialog  gt      lt div class  modal-content  gt       lt div class  modal-body  gt       lt  div gt        lt div class  modal-footer  gt             lt  --   -- gt    lt  --             -- gt         lt ANY data-toggle  modal  data-target  TARGET-2  data-dismiss  modal  gt     lt  ANY gt        lt  div gt      lt  div gt     lt  div gt   lt  div gt    Demo

User · Answer

I use another way       showModal   on  hidden bs modal   function                 easyModal   on  shown bs modal   function                    body   addClass  modal-open

User · Answer

if you use mdb use this code       var visible modal       modal show   attr  id       modalID or undefined     if  visible modal       modal is active                 visible modal  modal  hide       close modal

User · Answer

buttonid   click function            modal id you want to hid   modal  hide           same as above button id     buttonid   click function        Modal id You Want to Show   modal  backdrop   static   keyboard  false

User · Answer

This code  close modal opened  open the new modal but inmediatly  new modal is closed     nameClose  modal  hide      nameOpen  modal  show      My solution for open new modal after close other is   function swapModals nameClose nameOpen          nameClose  modal  hide          nameClose  on  hidden bs modal   function              console log  Fired when hide event has finished               nameOpen  modal  show

User · Answer

I have exact same problem  and my solution is only if modal dialog have  role  dialog   attribute         Find and Close current  display block  dialog    if another data-toggle modal is clicked    jQuery document  on  click    data-toggle  modal   function      jQuery   role  dialog    each function        switch jQuery this  css  display           case  block    jQuery     jQuery this  attr  id    modal  hide    break

User · Answer

Had the same issue  writing this here in case someone in the future stumbles upon this and has issues with multiple modals that have to have scrolling as well  I m using Bootstrap 3 3 7   What I did is have a button like this inside my first modal    lt div id  FirstId  data-dismiss  modal  data-toggle  modal  data-target   YourModalId 2  gt Open modal lt  div gt    It will hide the first and then display the second  and in the second modal I would have a close button that would look like this    lt div id  SecondId  data-dismiss  modal  data-toggle  modal  data-target   YourModalId 1  gt Close lt  div gt    So this will close the second modal and open up the first one and to make scrolling work I added to my  css file this line    modal   overflow  auto  important      PS  Just a side note  you have to have these modals separately  the minor modal can not be nested in the first one as you hide the first one  So here s the full example based on the bootstrap modal example    lt  -- Button trigger modal -- gt   lt button type  button  class  btn btn-primary  data-toggle  modal  data-target   exampleModal  gt    Launch demo modal  lt  button gt    lt  -- Modal 1 -- gt   lt div class  modal fade  id  exampleModal  tabindex  -1  role  dialog  aria-labelledby  exampleModalLabel  aria-hidden  true  gt     lt div class  modal-dialog  role  document  gt       lt div class  modal-content  gt         lt div class  modal-header  gt           lt h5 class  modal-title  id  exampleModalLabel  gt Modal title lt  h5 gt           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt             lt span aria-hidden  true  gt  amp times  lt  span gt           lt  button gt         lt  div gt         lt div class  modal-body  gt          Add lorem ipsum here        lt  div gt         lt div class  modal-footer  gt           lt button type  button  class  btn btn-primary  data-dismiss  modal  data-toggle  modal  data-target   exampleModal2  gt            Open second modal          lt  button gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    lt  -- Modal 2 -- gt   lt div class  modal fade  id  exampleModal2  tabindex  -1  role  dialog  aria-labelledby  exampleModalLabel  aria-hidden  true  gt     lt div class  modal-dialog  role  document  gt       lt div class  modal-content  gt         lt div class  modal-header  gt           lt h5 class  modal-title  id  exampleModalLabel  gt Modal title lt  h5 gt           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt             lt span aria-hidden  true  gt  amp times  lt  span gt           lt  button gt         lt  div gt         lt div class  modal-body  gt                     lt  div gt         lt div class  modal-footer  gt           lt button type  button  class  btn btn-secondary  data-dismiss  modal   data-toggle  modal  data-target   exampleModal  gt Close lt  button gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

Using click function       btn-editUser   on  click   function            viewUser   modal  hide       hides modal with id viewUser          editUser   modal  show       display modal with id editUser       Heads up   Make sure that the one you want to show is an independent modal

User · Answer

Hide modal dialog box   Method 1  using Bootstrap       close   click         MyModal  close   click        myModalAlert   modal  hide      Method 2  using stopPropagation        a close   on  click   function e          modal   modal  hide      e stopPropagation          Method 3  after shown method invoke       myModal   on  shown   function            myModal   modal  hide         Method 4  Using CSS   this display  block     set block CSS this display  none     set none CSS after close dialog

User · Answer

lt div class  container  gt     lt h1 gt Bootstrap modal  close current  open new lt  h1 gt     lt p class  text-muted  gt    A proper and clean way to get this done without addtional Javascript jQuery  The main purpose of this demo is was to answer this     lt a href  http   stackoverflow com questions 18253972 bootstrap-modal-close-current-open-new  gt question on stackoverflow lt  a gt     lt  p gt     lt hr   gt      lt button type  button  class  btn btn-primary  data-toggle  modal  data-target   demo-1  gt Launch Modal  1 lt  button gt     lt button type  button  class  btn btn-info     data-toggle  modal  data-target   demo-2  gt Launch Modal  2 lt  button gt     lt button type  button  class  btn btn-default  data-toggle  modal  data-target   demo-3  gt Launch Modal  3 lt  button gt      lt  --   Modal  1   -- gt     lt div class  modal fade  id  demo-1  tabindex  -1  gt       lt div class  modal-dialog  gt        lt div class  modal-content  gt         lt button type  button  class  close  data-dismiss  modal  gt  lt i class  icon-xs-o-md  gt  lt  i gt  lt  button gt         lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt           lt h4 class  modal-title caps  gt  lt strong gt Demo Modal  1 lt  strong gt  lt  h4 gt         lt  div gt         lt div class  modal-body  gt           lt div class  form-group  gt             lt div class  input-group  gt               lt input type  text  class  form-control  placeholder  Input Placeholder       gt               lt span class  input-group-btn  gt  lt button class  btn btn-default  type  button  gt Action lt  button gt  lt  span gt             lt  div gt           lt  div gt         lt  div gt          lt div class  modal-footer  gt               lt button type  button  class  btn btn-danger  data-dismiss  modal  gt  amp times  lt  button gt               lt button type  button  class  btn btn-info  data-toggle  modal  data-target   demo-2  data-dismiss  modal  gt Close current  Launch Modal  2 lt  button gt               lt button type  button  class  btn btn-default  data-toggle  modal  data-target   demo-3  data-dismiss  modal  gt Close current  Launch Modal  3 lt  button gt           lt  div gt        lt  div gt       lt  div gt     lt  div gt      lt  --   Modal  2   -- gt     lt div class  modal fade  id  demo-2  tabindex  -1  gt       lt div class  modal-dialog  gt        lt div class  modal-content  gt         lt button type  button  class  close  data-dismiss  modal  gt  lt i class  icon-xs-o-md  gt  lt  i gt  lt  button gt         lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt           lt h4 class  modal-title caps  gt  lt strong gt Demo Modal  2 lt  strong gt  lt  h4 gt         lt  div gt         lt div class  modal-body  gt           lt div class  form-group  gt             lt div class  input-group  gt               lt input type  text  class  form-control  placeholder  Input Placeholder       gt               lt span class  input-group-btn  gt  lt button class  btn btn-default  type  button  gt Action lt  button gt  lt  span gt             lt  div gt           lt  div gt         lt  div gt          lt div class  modal-footer  gt               lt button type  button  class  btn btn-danger  data-dismiss  modal  gt  amp times  lt  button gt               lt button type  button  class  btn btn-primary  data-toggle  modal  data-target   demo-1  data-dismiss  modal  gt Close current  Launch Modal  1 lt  button gt               lt button type  button  class  btn btn-default  data-toggle  modal  data-target   demo-3  data-dismiss  modal  gt Close current  Launch Modal  3 lt  button gt           lt  div gt        lt  div gt       lt  div gt     lt  div gt      lt  --   Modal  3   -- gt     lt div class  modal fade  id  demo-3  tabindex  -1  gt       lt div class  modal-dialog  gt        lt div class  modal-content  gt         lt button type  button  class  close  data-dismiss  modal  gt  lt i class  icon-xs-o-md  gt  lt  i gt  lt  button gt         lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt           lt h4 class  modal-title caps  gt  lt strong gt Demo Modal  3 lt  strong gt  lt  h4 gt         lt  div gt         lt div class  modal-body  gt           lt div class  form-group  gt             lt div class  input-group  gt               lt input type  text  class  form-control  placeholder  Input Placeholder       gt               lt span class  input-group-btn  gt  lt button class  btn btn-default  type  button  gt Action lt  button gt  lt  span gt             lt  div gt           lt  div gt         lt  div gt          lt div class  modal-footer  gt               lt button type  button  class  btn btn-danger  data-dismiss  modal  gt  amp times  lt  button gt               lt button type  button  class  btn btn-info  data-toggle  modal  data-target   demo-1  data-dismiss  modal  gt Close current  Launch Modal  1 lt  button gt               lt button type  button  class  btn btn-primary  data-toggle  modal  data-target   demo-2  data-dismiss  modal  gt Close current  Launch Modal  2 lt  button gt           lt  div gt        lt  div gt       lt  div gt     lt  div gt      lt hr   gt     lt h3 class  caps  gt Usage  lt  h3 gt   lt pre class  prettyprint  gt  amp lt  -- Button trigger modal -- amp gt   amp lt ANY data-toggle  modal  data-target  TARGET  amp gt     amp lt  ANY amp gt    amp lt div class  modal fade  id  SELECTOR  tabindex  -1  amp gt     amp lt div class  modal-dialog  amp gt      amp lt div class  modal-content  amp gt       amp lt div class  modal-body  amp gt       amp lt  div amp gt        amp lt div class  modal-footer  amp gt             amp lt  --   -- amp gt    amp lt  --             -- amp gt         amp lt ANY data-toggle  modal  data-target  TARGET-2  data-dismiss  modal  amp gt     amp lt  ANY amp gt        amp lt  div amp gt      amp lt  div amp gt     amp lt  div amp gt   amp lt  div amp gt  lt  pre gt   lt  div gt   lt  -- end  container -- gt    lt hr   gt   lt footer class  text-center  gt  lt a href  https   twitter com  elmahdim  gt   elmahdim lt  a gt  lt  footer gt   lt br   gt   lt br   gt

User · Answer

Just copy and paste this code and you can experiment with two modals  Second modal is open after closing the first  one    lt  -- Button to Open the Modal -- gt   lt button type  button  class  btn btn-primary  data-toggle  modal  data-target   myModal  gt      Open modal  lt  button gt    lt  -- The Modal -- gt   lt div class  modal  id  myModal  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt                lt  -- Modal Header -- gt               lt div class  modal-header  gt                   lt h4 class  modal-title  gt Modal Heading lt  h4 gt                   lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt               lt  div gt                lt  -- Modal body -- gt               lt div class  modal-body  gt                  Modal body                lt  div gt                lt  -- Modal footer -- gt               lt div class  modal-footer  gt                   lt button type  button  class  btn btn-danger  data-dismiss  modal  gt Close lt  button gt               lt  div gt            lt  div gt       lt  div gt   lt  div gt      lt  -- The Modal 2 -- gt   lt div class  modal  id  myModal2  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt                lt  -- Modal Header -- gt               lt div class  modal-header  gt                   lt h4 class  modal-title  gt Second modal lt  h4 gt                   lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt               lt  div gt                lt  -- Modal body -- gt               lt div class  modal-body  gt                  Modal body                lt  div gt                lt  -- Modal footer -- gt               lt div class  modal-footer  gt                   lt button type  button  class  btn btn-danger  data-dismiss  modal  gt Close lt  button gt               lt  div gt            lt  div gt       lt  div gt   lt  div gt       lt script gt          myModal   on  hidden bs modal   function                  myModal2   modal  show           lt  script gt    Cheers

User · Answer

You need to add following attribute to the link or button where you want add this functionality     data-dismiss  modal  data-toggle  modal  id  forgotPassword  data-target   ModalForgotPassword    A detaile blog  http   sforsuresh in bootstrap-modal-window-close-current-open-new-modal

User · Answer

By using the following code you can hide first modal and immediately open second modal  by using same strategy you can hide second modal and show the first one        buttonId   on  click   function            currentModalId   modal  hide            currentModalId   on  hidden bs modal  function            newModalId   modal  show

User · Answer

Try this          model1   modal  hide    setTimeout function            modal2   modal  show      400

User · Answer

I might be a bit late to this but I think I ve found working solution   Required -   jQuery  All modals with a closing dismissal button having attributes set as follows -   lt button type  button  class  btn close modal  data-toggle  modal  data-target   Modal  gt Close lt  button gt      Please see the class close modal added to the button s classes  Now to close all existing modals  we ll call       close modal   trigger  click      So  wherever you want to open a modal  Just add the above code and your all open modals shall get closed   Then add your normal code to open the desired modal      DesiredModal   modal

User · Answer

Problem with data-dismiss  modal  is it will shift your content to left  I am sharing what worked for me  problem statment was opening pop1 from pop2  JS CODE  var showPopup2   false      popup1   on  hidden bs modal   function          if  showPopup2                popup2   modal  show            showPopup2   false                 popup2   click function             popup1   modal  hide        showPopup2   true

User · Answer

I had the same issue as  Gravity Grave whereby scrolling doesn t work if you use  data-toggle  modal  data-target  TARGET-2     in conjunction with   data-dismiss  modal    The scroll doesn t work correctly and reverts to scrolling the page rather than the modal   This is due to data-dismiss removing the modal-open class from the  tag   My solution in the end was to set the html of the inner component on the modal and use css to fade the text in out

User · Answer

It s not exactly the response but it s useful when you want to close the current modal and open a new modal   In the html in the same button  you can ask to close the current modal with data-dismiss and open a new modal directly with data-target    lt button class  btn btn-success   data-toggle  modal   data-target   modalRegistration   data-dismiss  modal  gt Register lt  button gt

[javascript] Bootstrap modal: close current, open new

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap