CODEWITHSUNDEEP
twitter-bootstrap-3
Ando
Ando

Reputation: 1827

bootstrap close all open modals prior to opening a new one

I have a situation where I'm using a number of modals (for a login form, for a registration form, for a pass retrieval form, etc.) What happens is that if the user clicks "login" and then "register" they'll get two modals on top of each other. I would like bootstrap to be automatically closing all open modals prior to opening a new one. Ideally also wait for the animation.

Has anyone done anything? I have the following solution but I need to target the function every time.

function close_modal() {
    $('.modal').modal('hide')
}

How can I bind this to every modal that opens?

I'm using Bootstrap v3.3.4

Upvotes: 5

Views: 16202

Answers (3)

ro_puente
ro_puente

Reputation: 173

If you want to do it with vanilla JS you can do the following for Bootstrap V5:

// import all your dependencies
import * as bootstrap from "bootstrap"

// close all modals but the one you want to open
const $modals =  document.querySelectorAll('.modal')
$modals.forEach(modal => {
  modal.addEventListener('show.bs.modal', function() {
    $modals.forEach(_modal => {
      let currentModal = bootstrap.Modal.getInstance(_modal)
      if (this !=_modal && currentModal) currentModal.hide()
    })
  })
})

Upvotes: 0

SpinyMan
SpinyMan

Reputation: 484

You can simply use this solution for entire site:

$('body').on('show.bs.modal', '.modal', function () {
    $('.modal:visible').removeClass('fade').modal('hide').addClass('fade');
});

It's necessary to remove class fade (and add it later) to avoid scrolling issue of new shown popup. If not - you couldn't scroll it :(

Upvotes: 2

KenKenKen
KenKenKen

Reputation: 467

According to Bootstrap's website

Multiple open modals not supported Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

I tried to open multiple modals at the same time using javascript, which leads to the second modal not responding to events such as clicks.

So you will not get two multiple modals showing at the same time if you just click on the web page.

Here's the link Bootstrap Modals

============edited here===============

You can try this

$('.modal').on('show.bs.modal', function () {
    $('.modal').not($(this)).each(function () {
        $(this).modal('hide');
    });
});

So before a modal is showing up, this script will try to close all other modals.

Here is the test html I used.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modal Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="modal fade" id="modal_1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">Title1</h4>
                </div>
                <div class="modal-body">
                    <p>Body1</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-default" id="launchSecond">Second</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal_2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">Title2</h4>
                </div>
                <div class="modal-body">
                    <p>Body2</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-default" id="launchFirst">First</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-2 col-md-offset-5">
                <button type="button" class="btn btn-success" id="launchModalBtn">Launch Modal</button>
            </div>
        </div>
    </div>
</body>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        $(document).on('click','#launchModalBtn',function () {
            $('#modal_1').modal();
        });

        $(document).on('click', '#launchSecond', function () {
            $('#modal_2').modal();
        })

        $(document).on('click', '#launchFirst', function () {
            $('#modal_1').modal();
        })

        $('.modal').on('show.bs.modal', function () {
            $('.modal').not($(this)).each(function () {
                $(this).modal('hide');
            });
        });
    </script>
</html>

Upvotes: 19

Related Questions