javascript - Make jQuery modal not block other UI elements -

i'm using jquery modal simulate toast message:

var modaldiv = $('div.modal'); $(modaldiv).modal({'backdrop': false}); $(modaldiv).modal('show');  runasync(function() { $(modaldiv).modal('hide'); }, null, 3000); 

it runs ok , rest of ui visible (since set backdrop false), rest of screen isn't clickable.

if inspect html, can see <div class="modal fade in"> node covering whole screen , above rest.

is there way change this, , let me interact ui without clearing modal?

jsfiddle here: https://jsfiddle.net/6z42mw13/2/

try this, not sure want accomplish, solution center modal on screen , make items selectable.

change modal css this..

.modal {    width: 200px;    position: fixed;    top: 50%;    right: 50%;    bottom: 0;    left: auto;    z-index: 1050;    display: none;    overflow: hidden;    -webkit-overflow-scrolling: touch;    outline: 0;    height: 80px;    margin-right: -100px; } 

your problem invisible modal still there , covering entire screen, fix that.