bootstrap modal popup not closing

Question

I'm having trouble using a bootstrap modal popup. Calling a popup is no issue, but trying to close it yields strange results. Instead of just hiding the popup and removing the backdrop, the popup gets hidden but another backdrop gets added, turning the screen almost black. the original backdrop does not get removed.

Below is the html code I've tried to use

<div id="popupDelete" class="modal hide fade" role="dialog">
    <div class="modal-header">delete transaction line?</div>
    <div class="moda-body">
        <button id="deleteYes">yes</button>
        <button class="cancelButton" data-dismiss="modal">no</button>
    </div>
</div>

this is what I got from the bootstrap 2.3 docs and should work out of teh bix, like everything else from bootstrap.

I've also tried using javascript with the $('#popupDelete').modal('hide'); function, which had the same effect.

I just tried your code in my application and it works. Maybe some of your other JS interferes? — notan3xit, Aug 27 '13 at 11:33

score 7 · Answer 1 · answered Mar 04 '14 at 09:36

7

This one worked for me

$('#popupDelete').modal('toggle');

answered Mar 04 '14 at 09:36

S.p

1,059
3
15
27

score 2 · Answer 2 · answered Aug 27 '13 at 11:28

2

I'm not sure if this is causing the problem, but there is a typo. It's

<div class="modal-body">

in line 3. There is missing an "l"

answered Aug 27 '13 at 11:28

morten.c

3,414
5
40
45

score 1 · Accepted Answer · answered Aug 27 '13 at 11:55

1

There was indeed javascript conficting with the closing of the popup. There was a line of javascript messing with all popups when clicking on a parent container, forcing them open again.

answered Aug 27 '13 at 11:55

dreagan

2,426
6
24
34

9

but how did you fix it? what was the line of code you needed to change? – Craigoh1 Feb 15 '18 at 23:52

score 0 · Answer 4 · edited May 23 '17 at 12:02

0

@dreagan, it may be happening like, when you click on open button for example, the popup is created dynamically, So you may be required the close Try this :

$('#popupDelete').close()

OR

$.modal.close();

Refer this How do you close a jQuery Simplemodal?

edited May 23 '17 at 12:02

Community

1
1

answered Aug 27 '13 at 11:31

RONE

5,415
9
42
71

score 0 · Answer 5 · answered Mar 19 '18 at 16:48

0

Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.

answered Mar 19 '18 at 16:48

Fitsum Belayneh

1

score 0 · Answer 6 · answered Apr 05 '22 at 18:59

Way to create a modal dynamically (Bootstrap 5):

Html:

...
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="close_modal();">
<span aria-hidden="true">&times;</span>
</button>
...

Javascript:

var my_modal = new bootstrap.Modal(document.getElementById('my_modal'), {
    keyboard: false
})

// To open
function open_modal () {
    my_modal.open();
}

// To close
function close_modal ()
{
   my_modal.hide();
}

Kushal · Answer 7 · 2022-11-16T05:48:45.807

-2

Check you have added the scripts as well. and try toggle method to hide the modal.

edited Nov 16 '22 at 05:48

answered Jan 22 '18 at 11:00

Kushal

31
3

3

Try to backup your answer with an explanation or documentation. This will help the person asking the question to understand what he/she did wrong. – Granny Jan 22 '18 at 11:08

bootstrap modal popup not closing

7 Answers7

Linked