How to completely remove the backdrop of a modal in bootstrap

Asked Jan 13 '17 at 12:54

Active Jan 13 '17 at 12:54

Viewed 657 times

Does anybody know how you can completely remove the backdrop or make it as big as the modal that is showing?

I managed to hide the backdrop and make the modal draggable by using jQuery UI

$("#myModal").draggable({
    handle: ".modal-header"
});

$('#myModal').modal({
    show: true,
    backdrop: false
});

And added the following styling to the modal

overflow: hidden

This works fine but this will only hide the backdrop but you cannot click on anything that is behind the backdrop. Only if you drag it all the way down you can click on the GUI components that are "behind" the backdrop. That's because the DIV is dragged with the modal.

So the one thing that is missing for me is that I want to be able to click on GUI components that are visible when I drag the modal. Does anybody know how to do this?

asked Jan 13 '17 at 12:54

Tranquilized

1

Can you create a fiddle of your code? – Mohammad Usman Jan 13 '17 at 12:55
I got the code from this Fiddle: http://jsfiddle.net/dave_wilton/a3gyq/5/ – Tranquilized Jan 13 '17 at 13:36
http://stackoverflow.com/questions/11519660/twitter-bootstrap-modal-backdrop-doesnt-disappear Check this – Manu Obre Jan 13 '17 at 13:53
I already checked that article but that doesn't solve my problem. The modal-backdrop class removal breaks my code. The modal doesn't show anymore after doing that. – Tranquilized Jan 13 '17 at 14:55
Rather then using bootstrap modal just use bootstrap-popover http://www.w3schools.com/bootstrap/bootstrap_popover.asp – Shalin Patel Jan 13 '17 at 17:06
That's not really a good alternative. A pop-over has a totally different purpose. – Tranquilized Jan 13 '17 at 17:48

How to completely remove the backdrop of a modal in bootstrap

0 Answers0