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?

Answer 1

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

Answer 2

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

bootply example