CODEWITHSUNDEEP
javascriptjquerycssangularjstwitter-bootstrap
Koustuv Sinha
Koustuv Sinha

Reputation: 1670

Angular Bootstrap $modal with active background elements

I have a requirement to implement Bootstrap modal, (I use angular $modal service) where the background elements should remain active, i.e even with the modal open, the background DOM must be usable / clickable. I have tried setting backdrop = false in the $modal properties but it doesn't work.

Upvotes: 2

Views: 1324

Answers (1)

dfsq
dfsq

Reputation: 193311

You can simply hide modal overlay with CSS:

.modal-backdrop {
    display: none;
}
.modal {
    left: 50%;
    right: inherit;
    top: 50%;
    bottom: inherit;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

For this also make sure you add backdrop: 'static' to modal configuration to prevent modal close on body click.

Demo: http://plnkr.co/edit/46M6F7BL9FtQqt9WiBuJ?p=preview

Upvotes: 2

Related Questions