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

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.

How to make modal dialog with blur background using Twitter Bootstrap?

Bootstrap use blackout when it shows modal dialog. How I make blur effect on entire background?

How to show bootstrap modal dialog over another bootstrap modal position

How to show bootstrap modal dialog over another bootstrap modal I have one modal dialogue on button click of modal I open another modal window which show after that window and over first modal ? I tri



Bootstrap modal background

How to display a background image when a modal is opened instead of the modal’s overlay effect? i tried adding css to the modal but the style applied only to the modal. Code <div class=modal hide

How to make modal dialog open at page load in bootstrap

It’s easy to show a modal dialog with javascript in Bootstrap. But how to make the modal open at page load without the need of a document.ready function or a body onload function? My need is to load a

make bootstrap twitter dialog modal draggable

I’m trying to make bootstrap twitter dialog modal draggable with this jquery plugin: http://threedubmedia.com/code/event/drag#demos but it doesn’t work. var $div = $(‘html’); console.debug($(‘.drag’)

jQuery Modal Dialog without jQueryUI

I was wondering how to implement a modal dialog with background overlay with jQuery without using the jqueryUI plugin?

How to Make a Dialog Modal

I have a save file dialog set up to display but when I click off of it the dialog it disappears into the background without a tab or anything. My question is how do I make the dialog modal? If you don

bootstrap modal dialog from another modal dialog

I am using the twitter bootstrap modal plugin and I have a modal dialog from which, on the click of a button, I want to show a smaller modal dialog. What is happening is that my second smaller modal d

How to find source of a bootstrap-modal dialog

I am using twitter bootstrap modal and jquery. How to find the source button, when there are more than one button from which modal dialog could be created ? Before bootstrap-modal, I was using oncli

how to use bootstrap’s modal dialog only, instead of the whole bootstrap.css to aviod conflicting with my own css

how to use bootstrap’s modal dialog only, instead of the whole bootstrap.css to aviod conflicting with my own css. I know maybe using fancybox is a better solution, but I just want the bootstrap’s mod

Answers

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.

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.

To get rid of the backdrop: after $(“#XXX”).modal({show:true}); then $(‘.modal-backdrop’).removeClass(“modal-backdrop”);

This worked for me:

$('#XXX').modal(); // This makes my modal dialog visible
$('.modal').css("background","rgba(0, 0, 0, 0)"); // Row I added to hide 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">