CODEWITHSUNDEEP
javascripthtmlmodal-dialogbootstrap-modal
NoorUllah
NoorUllah

Reputation: 881

Bootstrap close modal not working

I have two button here that are being used to close the modal. The first is the close icon and the other one is cancel button, both use data-dismiss to close the modal. However, both of them are not working. I am using the same code for another modal and there they are working fine. Any guesses? 

<div id="timeSelectModal{{entry.position - 1}}" style="display: none" class="modal">
    <div class="modal-dialog">
        <div id="timeSelectModalContent" class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <label>
                <input id="checkbox8pm{{entry.position - 1}}" type="checkbox" value="first_checkbox">
                <label class="checkbox-label">Thursday, 08:00 pm.</label>
            </label>
            <br>
            <label>
                <input id="checkbox9pm{{entry.position - 1}}" type="checkbox" value="second_checkbox">
                <label class="checkbox-label">Thursday, 09:30 pm.</label>
            </label>
            <div id="time-modal-footer" class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="timeSaveButton{{entry.position - 1}}" v-on:click="setTime(entry.position - 1)">Save</button>
            </div>
        </div>
    </div>
</div>

Upvotes: 87

Views: 230221

Answers (25)

Rajeshwar
Rajeshwar

Reputation: 2529

If you are using bootstrap v5.x and opening and closing the modal programmatically, and it's still not working, it means there could be one or more reasons behind it. Few reasons are mentioned in other answers, but the problem I had is different. I spent lot of time to figure out the issue myself and adding the answer here, so that it might help someone who has similar issue like i had.

I had two methods for showing and closing the modals as below.

showModal(id) {
  const myModal = new bootstrap.Modal(document.getElementById(id));
  myModal.show();
}

hideModal(id) {
  const myModal = new bootstrap.Modal(document.getElementById(id));
  myModal.hide();
}

If we write methods like above and use it to close multiple modals dynamically by passing different modal IDs, then it may not work properly all the times, especially when you are dealing with multiple modals.

So what you have to do is modify the above-mentioned methods as below

showModal(id) {
  const myModal = bootstrap.Modal.getOrCreateInstance(document.getElementById(id));
  myModal.show();
}

hideModal(id) {
  const myModal = bootstrap.Modal.getOrCreateInstance(document.getElementById(id));
  myModal.hide();
}

So in old methods we were creating the instance of the modal multiple times with new boostrap, in the new methods we are using getOrCreateInstance method which will get the instance if already created or create a new instance if it doesn't exist.

Upvotes: 1

Mukul Panchakarla
Mukul Panchakarla

Reputation: 85

In my case I modified the modal as per our design, So, I missed to include 'modal-content' class. After including, it worked.

Upvotes: 0

Jay Court
Jay Court

Reputation: 1

Have a look and ensure that you are not including the html data attributes to toggle the modal if you are handling the logic in javascript because this will cause the event to double fire, creating two modal-backdrop divs. This means that on hide/dismiss, it will remove 1 modal-backdrop but leaves the duplicate and hence it appears not to have closed.

On the event that presents the modal, have your dev tools open and look at the DOM, you will clearly see two .modal-backdrop divs are spawned.

Solution in this case is to choose between html data-attributes and JS logic, but not both.

Upvotes: 0

Colmofarrell
Colmofarrell

Reputation: 1905

I was stuck on this for a while also. I have no idea why but when I used data-bs-dismiss in stead of data-dismiss in the class for the close button it worked for me.

data-dismiss is on Bootstrap 4.x version while data-bs-dismiss is on Bootstrap 5.x version.

Please see below full code for close button.

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

Upvotes: 190

CodeToLife
CodeToLife

Reputation: 4171

in 2023 use

$('#mypopup').modal('show');

instead of

$('#mypopup').show();

either rises the popup w/o any issue . But that Cancel works with first one only

Upvotes: 3

Leonardo Cortes
Leonardo Cortes

Reputation: 21

I had the same issue. I fixed the problem adding "events.js" where inside i wrote this code:

$("button[data-dismiss=modal]").click(function()
{
  $(".modal").modal('hide');
});

By adding this code in each head of your page u will able to close modal by native buttons. I hope this solution can be helpful for someone

Upvotes: 2

hardik kanzariya
hardik kanzariya

Reputation: 51

it happens when you use bootstrap 5, the below code worked for me. I hope it will work for you.

<button type="button" class="close" data-bs-dismiss="modal">X</button>

Thanks

Upvotes: 3

Ercan Sarıoğlu
Ercan Sarıoğlu

Reputation: 61

I was calling jQuery on target page. I noticed that when I removed this line, the close command worked.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Then I called the old version of jQuery and realized that it was working again.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

I don't know why it prevents the close button from working on 3.x and above..

Upvotes: 0

Klemikaze
Klemikaze

Reputation: 378

I ran into this issue recently, all modals in my app acted correctly, but new one was 'mibehaving'. Anyway long story short, dont confuse

$("#flash-modal").modal('show');

with

$("#flash-modal").show();

show() is jQuery method changing css atribute display, you need to init it correctly with modal! Hope this helps someone...

Upvotes: 0

Jo&#227;o Machado
Jo&#227;o Machado

Reputation: 11

   const backdrops = document.querySelectorAll('.modal-backdrop.fade.show');
          Array.prototype.forEach.call(backdrops, function (node) {
            node.parentNode.removeChild(node);
          });
          $(`#${data.uniqueId}`).modal('hide');
          $(`#${data.uniqueId}`).parent().removeClass("open");
body {
  padding-right: 0 !important;
  overflow: auto !important;
}

Upvotes: 0

Zolt&#225;n S&#252;le
Zolt&#225;n S&#252;le

Reputation: 1704

if you put into your code (in some cases it makes sense):

$modal.off('click')

then it also results that the modal won't be closed because the event is blocked. You can test it whether you can close the modal by pressing Esc. It that works then your click events are blocked.

You can debug it like this where you will see that it returns false:

$modal.on('click',function(event){
    console.log('debug click');
    console.log(event);
});

In that case you have to handle it yourself:

$modal
  .on('click', '[data-dismiss="modal"]', function() {
      $modal.modal('hide');
  });

Upvotes: 0

Justin Ngan
Justin Ngan

Reputation: 1090

SUMMARY OF BOOTSTRAP 5 ISSUE

Hi. Like everyone else this tripped me up. This thread has spanned a long period and certainly there have been other issues causing the problem. However, as Alexandre Elshobokshy has mentioned unwittingly, changing

data-bs-dismiss

instead of

data-dismiss

works. I wanted to call this out since it is correct but there are additional keys that need to be updated for Modals to work with Bootstrap and HTML 5.

HTML5 has changed the tags required by Bootstrap. One is the data-bs-dismiss.

The others are:

data-bs-toggle & data-bs-target

I hope this helps others !

Upvotes: 24

Sangam Choudhary
Sangam Choudhary

Reputation: 1

None of the answers helped me. But I was having issues as well.

I forgot to add the JavaScript file of Bootstrap. What I added was just the CSS of Bootstrap. Both the Bootstrap CSS and JS CDN links need to be added to the page.

So make sure you add this Bootstrap CDN to add the script:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

Upvotes: 0

LosmiNCL
LosmiNCL

Reputation: 309

What helped in mine case, I've replaced data-dismiss with data-bs-dismiss, now it works!

Upvotes: 8

Shyam Mahato
Shyam Mahato

Reputation: 921

remove the "fade" class.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

change to

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Fade is an effect, if you remove fade, your modal will not have fade effect. The several problem which cause this issue is not call modal with right method.

Wrong method : $("#myModal").show();

Right method : $("#myModal").modal('show');

Upvotes: 92

Chris Needham
Chris Needham

Reputation: 75

I had this issue too and found this page so thought I would post my solution for anybody who may do the same.

Mine was down to the way the modal appeared. Somebody had use .toggle() when it should be .modal('show') so I guess from the modal point of view it never appeared properly so it can't disappear either.

Hope that helps somebody living in the future.

Upvotes: 2

PJunior
PJunior

Reputation: 2767

In my case I had other div over it.
I'v solved with z-index.

.modal button.close {
    z-index: 1000;
}

Upvotes: 3

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102448

In my case I was missing the data-target attribute on the link that calls the modal.

<a href="#getResults"
   class="results-link"
   data-toggle="modal"
   data-target="#results-modal"
   data-providerName="${providerName}"
   data-individualID="${individualID}"
   data-reportID="@Model.ReportID">Results
</a>

Upvotes: 0

nikhil
nikhil

Reputation: 56

Give ID 'modalClose' to Model's Close button and ID 'myView' to your Model,

then use the following code:

    <script>
    $(function () {
        $('#modalClose').on('click', function () {
            $('#myView').hide();
        })
    })

</script>

It will work like a charm.

Upvotes: 4

Hardik Kalathiya
Hardik Kalathiya

Reputation: 2253

Here is my implementation of a modal you can use for comparing to help troubleshoot what errors exist in your modal code.

<html lang="en">
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h2>click Here</h2>
<div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>

Upvotes: 3

Gaurav Singh
Gaurav Singh

Reputation: 1

For me modal was not getting closed because script files had conflict somewere, so used minimum required script files to check the problem in closing model.Way I added scripts for which model was getting closed properly

"scripts": [
          "src/assets/js/lib/jquery/jquery.min.js",
          "src/assets/js/lib/bootstrap/js/popper.min.js",
          "src/assets/js/lib/bootstrap/js/bootstrap.min.js"
        ]

And for sure I had added bootstrap.min.css in styles.

Upvotes: 0

Nazmul Haque
Nazmul Haque

Reputation: 868

Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

Upvotes: 2

Yashwardhan Pauranik
Yashwardhan Pauranik

Reputation: 5566

First check you have included bootstrap.js file in your html correctly.

You can try this code and replace the button tag for closing modal by -

<a href="#" class="close" data-dismiss="modal" aria-label="close">&times;</a>

If still doesn't work.. Let me know.!

You can add an on-click event on close button in jQuery. Like this-

$("#yourModal").modal("hide");

Upvotes: 14

Dave Dold
Dave Dold

Reputation: 259

Very old topic but it still shows up first for people searching this problem, likely caused by them making the same simple mistake I did which was failing to ensure that the modal div was outside of the main body div from which it was launched. To use the Material Kit as an example, you should double check that the target "#myModal" div is outside the closing div tag for your main container.

<div class="main main-raised">
    <div class="container">
    <!--                 modals -->
        <div class="row" id="modals">
            <div class="col-md-6">
                <button class="btn btn-primary btn-raised btn-round" data-toggle="modal" data-target="#myModal">
                    Classic modal
                </button>
            </div>

        </div>
    <!--                 end modals              -->
    </div>
</div>

<!-- Classic Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="material-icons">clear</i>
                </button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Hey hey</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-simple">Nice Button</button>
                <button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--  End Modal -->

Upvotes: 25

Abhishek
Abhishek

Reputation: 316

use this code close model

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h2>click on button</h2>
<div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Upvotes: -2

Related Questions