Bootstrap modal: close current, open new

Javascript Problem Overview

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.

Javascript Solutions

Solution 1 - Javascript

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

Solution 2 - Javascript

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.

Solution 3 - Javascript

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:

<button class="btn btn-success" 
data-toggle="modal" 
data-target="#modalRegistration" 
data-dismiss="modal">Register</button>

Solution 4 - Javascript

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;
});

Solution 5 - Javascript

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");
      }
    });
  });
});

Solution 6 - Javascript

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");
    });
});

Solution 7 - Javascript

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/

Solution 8 - Javascript

data-dismiss="modal"

it is used to close the existing opened model. you can set it to the new model

Solution 9 - Javascript

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:

<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>

But this will cause scroll-bar to disappear and you will notice that if the second modal was taller than the first one

So the solution is to add the following style in the modal inline style :

Style = "overflow-y : scroll ; "

Solution 10 - Javascript

For Bootstrap v4

You can toggle between modals by having putting data-dismiss="modal" and data-toggle="modal" in the same HTML element. You'd also need the data-target attribute set to the modal you'd like to open.

Here's an example:

<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#Modal2" >
Open second modal
</button>

Remember to set an id for each of the modals and have the data-target point to the one you'd like to open

For bootstrap v5

Same as v4 just using the attributes data-bs-toggle data-bs-dismiss and data-bs-target

Like this:

<button class="btn btn-primary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#Modal2" >
Open second modal
</button>

They've included an example of this in the v5 documentation

NOTE:

The two modals need to be independent of each other, not nested in one another, in order for this to work. So if you're using an MVC framework, say for example ASP.NET MVC, and have the first modal as its own partial view, you can't have the second modal in that view. You'll need to put the second modal in the parent view.

Solution 11 - Javascript

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).

Solution 12 - Javascript

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;}
    }
  });
});

Solution 13 - Javascript

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.

Solution 14 - Javascript

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:

<div id="FirstId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_2">Open modal</div>

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:

<div id="SecondId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_1">Close</div>

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:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal 1 -->
<div class="modal fade" id="exampleModal" 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">
        Add lorem ipsum here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal2">
          Open second modal
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" 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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"  data-toggle="modal" data-target="#exampleModal">Close</button>
      </div>
    </div>
  </div>
</div>

Solution 15 - Javascript

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');
    });
}

Solution 16 - Javascript

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.

Solution 17 - Javascript

In first modal:

replace modal dismiss link in footer with close link below.

<div class="modal-footer">
      <a href="#"  data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#second_model_id">Close</a>
</div>

In second modal:

Then second modal replace top div with below div tag.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">

Solution 18 - Javascript

Try this

    $('#model1').modal('hide');
setTimeout(function(){
    $('#modal2').modal('show');
},400);

Solution 19 - Javascript

just close all open modals before opening a new one

$('.modal').modal('hide'); // close all open modals
$('#login').modal('show'); // open a modal named #login

Solution 20 - Javascript

$("#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})});

Solution 21 - Javascript

I use another way:

$('#showModal').on('hidden.bs.modal', function() {
        $('#easyModal').on('shown.bs.modal', function() {
            $('body').addClass('modal-open');
        });
    });

Solution 22 - Javascript

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.

Solution 23 - Javascript

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 -> 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 -> 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 & hiding the modals are automatically taken care.

Solution 24 - Javascript

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...
});

Solution 25 - Javascript

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
    }

Solution 26 - Javascript

<div class="container">
  <h1>Bootstrap modal: close current, open new</h1>
  <p class="text-muted">
  A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this 
  <a href="http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new">question on stackoverflow</a>
  </p>
  <hr />
  
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1">Launch Modal #1</button>
  <button type="button" class="btn btn-info"    data-toggle="modal" data-target="#demo-2">Launch Modal #2</button>
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3">Launch Modal #3</button>

  <!-- [ Modal #1 ] -->
  <div class="modal fade" id="demo-1" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #1</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #2 ] -->
  <div class="modal fade" id="demo-2" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #2</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #3 ] -->
  <div class="modal fade" id="demo-3" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #3</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
        </div>
     </div>
    </div>
  </div>
  
  <hr />
  <h3 class="caps">Usage:</h3>
<pre class="prettyprint">&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;</pre>
</div> <!-- end .container -->

<hr />
<footer class="text-center"><a href="https://twitter.com/_elmahdim">@_elmahdim</a></footer>
<br />
<br />

Solution 27 - Javascript

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 -

<button type="button" class="btn close_modal" data-toggle="modal" data-target="#Modal">Close</button>

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();

Solution 28 - Javascript

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

Solution 29 - Javascript

Just copy and paste this code and you can experiment with two modals. Second modal is open after closing the first one:

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>



<!-- The Modal 2 -->
<div class="modal" id="myModal2">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Second modal</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>




<script>
    $('#myModal').on('hidden.bs.modal', function () {
        $('#myModal2').modal('show')
    })
</script>

Cheers!

Content Type	Original Author	Original Content on Stackoverflow
Question	Eelco Luurtsema	View Question on Stackoverflow
Solution 1 - Javascript	Mahmoud	View Answer on Stackoverflow
Solution 2 - Javascript	Tim Wasson	View Answer on Stackoverflow
Solution 3 - Javascript	Karima Rafes	View Answer on Stackoverflow
Solution 4 - Javascript	Kuldeep Dangi	View Answer on Stackoverflow
Solution 5 - Javascript	Josh Dean	View Answer on Stackoverflow
Solution 6 - Javascript	Husnain Shabbir	View Answer on Stackoverflow
Solution 7 - Javascript	Suresh Kamrushi	View Answer on Stackoverflow
Solution 8 - Javascript	M. Lak	View Answer on Stackoverflow
Solution 9 - Javascript	anouar es-sayid	View Answer on Stackoverflow
Solution 10 - Javascript	Naftoli Ost	View Answer on Stackoverflow
Solution 11 - Javascript	Alvin K.	View Answer on Stackoverflow
Solution 12 - Javascript	Jonny	View Answer on Stackoverflow
Solution 13 - Javascript	Jamadan	View Answer on Stackoverflow
Solution 14 - Javascript	Renet	View Answer on Stackoverflow
Solution 15 - Javascript	Adrian Garcia Sabate	View Answer on Stackoverflow
Solution 16 - Javascript	claudios	View Answer on Stackoverflow
Solution 17 - Javascript	Taimoor Changaiz	View Answer on Stackoverflow
Solution 18 - Javascript	keroles Monsef	View Answer on Stackoverflow
Solution 19 - Javascript	Cris	View Answer on Stackoverflow
Solution 20 - Javascript	Ajay Kabariya	View Answer on Stackoverflow
Solution 21 - Javascript	Алексей Морозов	View Answer on Stackoverflow
Solution 22 - Javascript	shivgre	View Answer on Stackoverflow
Solution 23 - Javascript	Raj Pawan Gumdal	View Answer on Stackoverflow
Solution 24 - Javascript	Avnish alok	View Answer on Stackoverflow
Solution 25 - Javascript	Moein masoudi	View Answer on Stackoverflow
Solution 26 - Javascript	Junaid Masood	View Answer on Stackoverflow
Solution 27 - Javascript	Alpha	View Answer on Stackoverflow
Solution 28 - Javascript	Bharathiraja	View Answer on Stackoverflow
Solution 29 - Javascript	Adam Kozlowski	View Answer on Stackoverflow