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?

Cressida

Make use of class instead of id, when your creating same stuff multiple times. – Ammons

@Ammons He is using it correctly. What's the problem there? – Gebelein

Answer 1

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

bootply example

Pyrography

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: #10637167 . 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. – Bibliomancy

Answer 2

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

Gebelein

I tried that as well, but produces the same results. – Cressida

@Cressida 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. – Gebelein

@Cressida Do you have a working demo anywhere hosted? – Gebelein

Answer 3

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

Shill

Answer 4

You need to do this to fix.

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

Stolzer

Answer 5

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

Banish

Answer 6

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

Earthly

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. – Turbulent