Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap modal: close current, open new

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.

like image 610
Eelco Luurtsema Avatar asked Aug 15 '13 13:08

Eelco Luurtsema


People also ask

How do you dismiss a current modal?

You can toggle between modals by having putting data-dismiss="modal" and data-toggle="modal" in the same HTML element.

How do I keep my Bootstrap modal from closing when I click outside?

When the Button is clicked, the HTML DIV is referenced using jQuery and its modal function is called along with properties data-backdrop: "static" and data-keyboard: false which disables the closing of the Bootstrap Modal Popup when clicked outside.


1 Answers

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;

<!-- Button trigger modal --> <ANY data-toggle="modal" data-target="TARGET">...</ANY>  <div class="modal fade" id="SELECTOR" tabindex="-1">   <div class="modal-dialog">    <div class="modal-content">     <div class="modal-body"> ... </div>      <div class="modal-footer">           <!-- ↓ -->  <!--      ↓      -->       <ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>      </div>    </div>   </div> </div> 

Demo

like image 167
Mahmoud Avatar answered Sep 24 '22 06:09

Mahmoud