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 shown.
There seems to be no options that allow me to do this on the $("#selector").modal() function.
To get rid of the backdrop:
After modal initiation
$('#XXX').modal({show:true});
just trigger the code below
$('.modal-backdrop').removeClass("modal-backdrop");
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">
The correct way is to pass the param backdrop: false
when create the modal
$('#modal').modal({
backdrop: false
})
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; }
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.
Surey all you need to do is tweak the CSS to change the opacity of the black background. It doesn't have to be visible to block clicks to underlying elements (unless there's some clickjacking protection I don't know about?). The class to target is div.modal-backdrop.
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.