bootstrap css - how to make a modal dialog modal w

2020-05-19 04:54发布

问题:

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.

回答1:

To get rid of the backdrop:

After modal initiation

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

just trigger the code below

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


回答2:

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


回答3:

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

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


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


回答5:

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.



回答6:

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.



回答7:

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.