Bootstrap modal - screen goes black

Question

I have two modals, they pop up on button click. One works fine, however for the second one, the screen just goes black and nothing happens:

First, working modal:

<div id="deleteConfirmation" class="hidden, modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <h5>Are you sure you want to delete this contact?</h5>
      <button id="deleteOk">
        Yes
      </button>
      <button id="deleteNo">
        No
      </button>
    </div>
  </div>
</div>

and pops up on this command:

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

Second one, is almost identical, but not working:

<div id="addContact" class="hidden, modal fade">
  <div class="modal-header">
    <h5>Add New Contact</h5>
  </div>
  <div class="modal-dialog">
    <div class="modal-content"> 
      <label>First Name </label><input /> <br />
      <label>Last Name </label><input /> <br />
      <label>Address </label><input /> <br />
      <label>Phone Number </label><input /> <br />

      <button id="addConfirm">
        Confirm
      </button>
    </div>
  </div>
</div>

And the command:

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

It's basically two identical modals, however for the second one, screen just goes black, and the first modal works correctly. I assume it's one of the classes that I'm using. What seems to be off here?

Make use of class instead of id, when your creating same stuff multiple times. — stanze, Jun 18 '15 at 08:50
@stanze He **is** using it correctly. What's the problem there? — Praveen Kumar Purushothaman, Jun 18 '15 at 08:55

score 3 · Answer 1 · answered Jun 18 '15 at 08:50

3

You have a typo here:

<div id="deleteConfirmation" class="hidden, modal fade">
<div id="addContact" class="hidden, modal fade">

Remove the commas:

<div id="deleteConfirmation" class="hidden modal fade">
<div id="addContact" class="hidden modal fade">

So the script is unable to determine whether the hidden class is correctly applied or not, and ultimately you won't see anything other than a black screen of death! :O

answered Jun 18 '15 at 08:50

Praveen Kumar Purushothaman

164,888
24
203
252

I tried that as well, but produces the same results. – Mefhisto1 Jun 18 '15 at 08:54
@Mefhisto1 Do you have any other scripts or CSS that modifies them? Okay, do one thing. Right click on the black screen and inspect the modal window. – Praveen Kumar Purushothaman Jun 18 '15 at 08:55
@Mefhisto1 Do you have a working demo anywhere hosted? – Praveen Kumar Purushothaman Jun 18 '15 at 08:55

score 2 · Accepted Answer · answered Jun 18 '15 at 11:42

2

I created some modals at bootply and adapted your code, check out if this is of any help.

bootply example

answered Jun 18 '15 at 11:42

Vitor Mateus

135
5

The link in this answer no longer works so no idea what the solution was. This similar issue with a still current answer may be a clue to whomever comes here later: https://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background . In my case it was due to the faulty modal being inside a fixed-position parent, causing the background to be added on top of it. – Edoardo Facchinelli Mar 19 '21 at 20:55

score 1 · Answer 3 · answered Jun 18 '15 at 09:41

I think the real thing to do here is to remove the hidden class in your div tags by changing this:

<div id="deleteConfirmation" class="hidden modal fade">
<div id="addContact" class="hidden modal fade">

to this

<div id="deleteConfirmation" class="modal fade">
<div id="addContact" class="modal fade">

if you go through the bootstrap doc you wont see where a hidden class was added: http://getbootstrap.com/javascript/#modals

score 1 · Answer 4 · answered Jan 05 '21 at 13:23

1

You need to do this to fix.

$("#deleteConfirmation").prependTo("body");

answered Jan 05 '21 at 13:23

Safa Tunç

122
2
9

score 0 · Answer 5 · answered Apr 23 '21 at 20:27

0

This one worked for me. $("#deleteConfirmation").prependTo("body");

answered Apr 23 '21 at 20:27

krueger13

1

score 0 · Answer 6 · answered Oct 19 '22 at 11:56

0

May Be your bootstrap model inside any div try to put the end of the body :)

answered Oct 19 '22 at 11:56

Mayur Pujari

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 23 '22 at 06:14

Bootstrap modal - screen goes black

6 Answers6