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.

Bootstrap 2 or 3? Can you set up a JS Fiddle of what you've got? — Tim Wasson, Aug 15 '13 at 13:54
Bootstrap 2.3.1. I think I cant setup a JS Fiddle because of the dynamic content — Eelco Luurtsema, Aug 15 '13 at 14:14
a detailed blog: http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal — Suresh Kamrushi, Dec 09 '20 at 05:21

Mahmoud · Answer 1 · 2015-10-03T19:21:49.433

87

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

edited Oct 03 '15 at 19:21

answered Feb 05 '15 at 19:32

Mahmoud

1,385
2
10
22

29

No bueno because you'll notice that, after opening the first modal, scrolling the page works properly, but if you launch another modal from an existing modal the scroll then shifts to the background. This is a big problem if you have a modal that needs to be scrolled (e.g. if you're viewing on a mobile device). – Gravity Grave Jun 29 '15 at 16:00
I have a very similar problem but in angular. Do you know how to do the same thing you did here but in an angular controller and using the `templateUrl` and `windowClass` properties? – John R Aug 15 '15 at 12:45
1

Thanks - works for me to. The main problem for me was that I missed `data-dismiss="modal"` on button – FDisk Mar 17 '16 at 15:50
@Mahmoud , hey is there any way to avoid the vibrating kind of effect while loading the second modal from one? and how to avoid the extra scroll ? – Arun Xavier May 13 '16 at 06:19
That's a browser issue, in Google Chrome "shake" when change modal, close, or open. try `-webkit-backface-visibility: hidden;` on html,body css – Máxima Alekz Sep 15 '17 at 14:58
Excellent solution! It was exactly what I needed for navigating between modals. – Sorin Haidau Apr 03 '18 at 11:05
the scrolling behavior is messed up since the "model-open" class disappears from when opening the new modal, for whatever reason. Just make sure you have the class set `$(document).ready(function () { $('#YOURMODAL').on('shown.bs.modal', function() { $('body').addClass('modal-open'); }); });` – EvilSmurf Jan 20 '22 at 12:30
This doesn't work properly when using the fade option. https://stackoverflow.com/a/44391959/4367223 – Daniel Dewhurst Mar 08 '22 at 17:25

score 82 · Accepted Answer · edited Jan 08 '19 at 22:11

82

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.

edited Jan 08 '19 at 22:11

CorkyDork

12
6

answered Aug 15 '13 at 14:40

Tim Wasson

3,606
16
16

Strange enough, I got it working with Bootstrap 3. I think my code had a conflict with the Bootstrap Tooltips, and that is changed in version 3. Thanks – Eelco Luurtsema Aug 16 '13 at 11:50
9

On bootstrap v3 event is 'hidden.bs.modal' – coure2011 Apr 25 '14 at 11:09
3

A solution with data-dismiss is much more elegant (atleast in 2015) and doesn't require any non-bootstrap javascript. – Manuel Arwed Schmidt Jun 23 '15 at 11:48
Thanks @coure2011 – capcom Apr 22 '17 at 18:08
7

data-toggle="modal" data-target="#targetmodal" data-dismiss="modal" This just works fine. – Sushan May 10 '18 at 05:10

score 47 · Answer 3 · answered Nov 08 '14 at 19:13

47

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>

answered Nov 08 '14 at 19:13

Karima Rafes

1,016
10
19

2

Problem with `data-dismiss="modal"` is, it will shift your content to left when you will close the second modal. – Kuldeep Dangi Jan 11 '16 at 04:04
2

hmmmm. this method doesn't work for me. The 1st one goes away but the 2nd never appears – KevinDeus May 23 '16 at 21:13
I'm not sure what problem you had, Kevin, but it worked fine for me with Bootstrap 3. The first modal disappears and the other opens just fine :) – RolandiXor May 29 '16 at 05:02
Worked beautifully for me! And very simple solution. Thanks! – guero64 Nov 29 '16 at 01:48
Simple and find as the best solution for showing and hiding modal. – Robin Sep 15 '19 at 06:51

score 12 · Answer 4 · edited Sep 09 '14 at 11:58

12

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

edited Sep 09 '14 at 11:58

Joshua Muheim

12,617
9
76
152

answered May 29 '14 at 03:14

Josh Dean

1,593
2
11
17

score 12 · Answer 5 · answered Jan 11 '16 at 03:56

12

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

answered Jan 11 '16 at 03:56

Kuldeep Dangi

4,126
5
33
56

2

such a simple solution :) – Geoff Nov 12 '16 at 16:57

anouar es-sayid · Answer 6 · 2021-03-26T00:03:52.320

7

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

edited Mar 26 '21 at 00:03

answered May 25 '20 at 10:30

anouar es-sayid

355
5
11

Exactly what was required to supplement the above-provided solution. Thank you very much! – Owais Sonija Oct 18 '22 at 15:01
I've also added styling to hide the scrollbar for the modal. `scrollbar-width: none; -ms-overflow-style: none; ::-webkit-scrollbar {display: none;}` – nxxn May 20 '23 at 06:44

Husnain Shabbir · Answer 7 · 2018-01-11T07:29:25.410

4

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

edited Jan 11 '18 at 07:29

answered Jan 11 '18 at 07:22

Husnain Shabbir

516
5
12

Fixes the scroll issue as well – Richard Housham Mar 25 '19 at 15:05

score 4 · Answer 8 · answered Feb 13 '18 at 06:00

4

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/

answered Feb 13 '18 at 06:00

Suresh Kamrushi

15,627
13
75
90

Works perfectly with bootstrap 4. – Heather92065 Jan 28 '19 at 21:36

score 4 · Answer 9 · answered Dec 17 '18 at 13:10

4

data-dismiss="modal"

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

answered Dec 17 '18 at 13:10

M. Lak

903
9
18

I'm not usre this works on all versions of bootstrap. The dismiss modal in my case causes the modal to close and opens the new one, but it also removed the modal class from the body and then i am unable to scroll the modal down. – Bodokh Dec 23 '19 at 10:02

score 3 · Answer 10 · answered Aug 23 '21 at 09:55

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.

score 2 · Answer 11 · answered Dec 07 '13 at 01:28

2

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

answered Dec 07 '13 at 01:28

Alvin K.

4,329
20
25

3

I don't think you need the `.attr` bit, do you? Wouldn't this work just as well? `var visible_modal = jQuery('.modal.in'); if (visible_modal) { visible_modal.modal('hide'); }`. – Paul D. Waite Feb 04 '14 at 14:06

Jonny · Answer 12 · 2016-02-03T12:48:09.197

2

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

edited Feb 03 '16 at 12:48

answered Feb 03 '16 at 12:42

Jonny

29
1
2

1

https://jsfiddle.net/e6x4hq9h/7/ I tried this and it works the first time I open the modal but not subsequent times. – Joshua Dickerson May 26 '16 at 17:32

score 2 · Answer 13 · answered Jun 02 '16 at 13:15

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.

score 2 · Answer 14 · answered Apr 26 '18 at 09:00

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>

score 2 · Answer 15 · answered Apr 22 '20 at 08:35

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

score 2 · Answer 16 · answered Mar 29 '21 at 05:32

2

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

answered Mar 29 '21 at 05:32

Cris

2,824
24
23

score 1 · Answer 17 · answered Jan 20 '17 at 03:16

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.

score 1 · Answer 18 · answered May 16 '17 at 07:49

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">

keroles Monsef · Answer 19 · 2018-09-19T14:14:44.003

1

Try this

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

edited Sep 19 '18 at 14:14

answered Sep 19 '18 at 11:47

keroles Monsef

679
7
15

1

This is actually better than the accepted solution, since no listener will be bound forever to the close modal event. – Luís Henriques Oct 23 '20 at 11:34

score 0 · Answer 20 · edited Mar 02 '16 at 14:47

0

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

edited Mar 02 '16 at 14:47

Karl Hill

12,937
5
58
95

answered Mar 02 '16 at 14:19

Ajay Kabariya

1
1

$("#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})}) – Ajay Kabariya Mar 02 '16 at 14:20

score 0 · Answer 21 · answered Sep 29 '16 at 22:11

0

I use another way:

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

answered Sep 29 '16 at 22:11

Алексей Морозов

187
1
1
10

score 0 · Answer 22 · answered Oct 26 '16 at 06:55

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.

Raj Pawan Gumdal · Answer 23 · 2017-03-20T13:33:23.733

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.

score 0 · Answer 24 · answered May 10 '17 at 13:49

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

score 0 · Answer 25 · answered May 11 '19 at 11:09

0

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
    }

answered May 11 '19 at 11:09

Moein masoudi

1
1

score 0 · Answer 26 · answered Aug 01 '19 at 13:45

<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 />

score 0 · Answer 27 · answered Nov 19 '19 at 07:59

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

score 0 · Answer 28 · edited Apr 12 '20 at 12:56

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

score 0 · Answer 29 · answered May 06 '20 at 11:04

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!

Elite Byte Code · Answer 30 · 2023-03-15T04:29:53.743

This solved the problem for me in a React / Next.Js component. I didn't need the data-bs-dismis="modal" attribute. data-bs-dismis="modal" was actually just hiding modal and not routing to target, so I removed it. I hope this helps in any way. I suppose it's the same with regular html since it's literally the same thing.

<div className='container d-flex flex-column justify-content-center align-items-center my-2'>
     <span className='py-3'>
         Don't have an Account,
         <a href='/retail-user/' data-target='/retail-user/'>Create One
         </a>
     </span>
</div>

score 0 · Answer 31 · answered Jul 14 '23 at 16:37

Believe it or not, I went through all the answers but I couldn't find a Comprehensive solution.

Here's my break with a function which will close all current modals and thereafter you can open your targeted modal through regular modal() method.

Additionally, I have added an argument which will close all the open modals except the chosen modal provided in function argument

function Close_All_Open_Modal(except_modal='')
    {
        if(except_modal!=='')
        {
// This will provide you information about the Modals being closed
            console.log('Closing all Modals except '+except_modal);    
        }
        
// This will let you know if the <body> has "modal-open" class
        var BodyHasModalClass = $('body').hasClass('modal-open');

        var openModals = 0; // No of Modals Open

            console.log(BodyHasModalClass); // True if there is any open modal
            
// Function will execute only if there is a Modal Open

            if(BodyHasModalClass)
            {
// Loop through each element with "modal" class
                $(".modal").each(function()
                {
                    this_modal = $(this);
                    if(this_modal.hasClass("show"))
                    {
                        var ModalName = this_modal.attr("id");
                        
                        if(except_modal!=='' && except_modal!==ModalName)
                        {
                            console.log(ModalName+' is open');
                            openModals++;
                            this_modal.modal('hide');
                        }
                        else if(except_modal=='')
                        {
                            console.log(ModalName+' is open');
                            openModals++;
                            this_modal.modal('hide');
                        }
                    }
                });
                
                console.log('Closed '+openModals+' Open Modals');
            }
    }

Let me know your views.

Bootstrap modal: close current, open new

31 Answers31

For Bootstrap v4

For bootstrap v5

Linked