CODEWITHSUNDEEP
javascripttwitter-bootstrapmodal-dialogbootstrap-modalbootbox
bachr
bachr

Reputation: 6006

Shaded bootbox dialog

I'm using bootbox to create bootstrap modals. Here is how I'm creating a sample one:

bootbox.dialog({message: "hello"});

My problem is that the rendered dialog is kind of disabled (all screen is shaded), I can't click on it and even ESC cannot make the modal disappear!

When I inspect the dialog element in the browser this is what I see:

<div class="bootbox modal fade in" tabindex="-1" role="dialog" style="display: block;" aria-hidden="false">
  <div class="modal-backdrop fade in" style="height: 321px;"></div>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">×</button>
        <div class="bootbox-body">hello</div>
      </div>
    </div>
  </div>
</div>

I checked with bootbox examples and it looks like it's the same CSS classes that have been used. So what's wrong here?

Upvotes: 0

Views: 473

Answers (1)

bachr
bachr

Reputation: 6006

I've to to add the following CSS to fix the problem:

.modal-backdrop.fade.in {
  z-index: 0;
}

Upvotes: 2

Related Questions