bootstrap css - how to make a modal dialog modal without affecting the background

Question

In bootstrap css, it is possible to display a modal dialog, but I want to be able to make it modal so the UI behind doesn\'t respond, without having the dark black background sh

Answer 1

add data-backdrop="false" to <div class="modal"> and Bootstrap will do the rest.

Example:

<div class="modal" id="genericModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">

Answer 2

if I'm correct you should be able to do this by calling:

$("#selector").modal({
    backdrop: "static"
});

then just change the CSS for the class of the backdrop and you're set.

Answer 3

To get rid of the backdrop:

After modal initiation

$('#XXX').modal({show:true});

just trigger the code below

 $('.modal-backdrop').removeClass("modal-backdrop");    

Answer 4

I prefer to just hide the backdrop so that you still have that feature of clicking out of the modal to hide it.

.modal-backdrop { opacity: 0 !important; }

Answer 5

Just use the css style as

 .modal-backdrop {background: none;}
 .modal{background: none;}

And all your modal background will go away for every modal you want to display in your app.

Answer 6

The correct way is to pass the param backdrop: false when create the modal

$('#modal').modal({
  backdrop: false
})