CODEWITHSUNDEEP
twitter-bootstrap
jaffa
jaffa

Reputation: 27350

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.

Upvotes: 47

Views: 70040

Answers (8)

suhailvs
suhailvs

Reputation: 21680

In bootstrap 5 the attribute is data-bs-backdrop.

Example:

<div class="modal" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="false">

Upvotes: 3

Jitu Deka
Jitu Deka

Reputation: 75

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.

Upvotes: 0

Ciprian B
Ciprian B

Reputation: 550

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

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

Upvotes: 20

Ali Almohsen
Ali Almohsen

Reputation: 1321

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; }

Upvotes: 7

Alex Marple
Alex Marple

Reputation: 3048

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">

Upvotes: 194

Hugh
Hugh

Reputation: 360

To get rid of the backdrop:

After modal initiation

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

just trigger the code below

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

Upvotes: 21

xorinzor
xorinzor

Reputation: 6467

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.

Upvotes: 2

Synchro
Synchro

Reputation: 37710

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.

Upvotes: 0

Related Questions