how to create a non-modal bootstrap dialog box

Question

I am trying to create a non-modal bootstrap dialog box. I just don't know how to do it. I have checked lot of post but none answers my question. I need the dialog to be none - modal because I want the user to be able to do other things even if the dialog box is opened.

I saw a link https://snippet.run/x657 but when I tried it, didn't work for me. The dialog refused to open

Thanks a lot.

Answer 1

Based on the docs this doesnt appear to be possible - however an alert might serve your purposes: http://getbootstrap.com/javascript/#alerts The alert can be put into a div that has a fixed positioned to keep them visible and independent of the content beneath them.

Fiddle

The html:

<button id="myBtn">show 'modal' alert</button>

<p>
  more content that the user should be able to see....
</p>
<p>
  more content that the user should be able to see....
</p>
<p>
  this is the bottom
</p>

<div style="position:fixed;bottom:0;left:0;width:100%;" id="alerts"></div>

and the JS to add the 'modal' alert (which you can style however you like):

$("#myBtn").click(function() {
    $('<div class="alert alert-success alert-dismissable">'+
            '<button type="button" class="close" ' + 
                    'data-dismiss="alert" aria-hidden="true">' + 
                '&times;' + 
            '</button>' + 
            'modal info...' + 
         '</div>').appendTo("#alerts");
}); 

Answer 2

Just execute the following line once the modal is shown

$(document).off('focusin.bs.modal');

By example :

$("#my-modal").on('shown.bs.modal',function(){
    $(document).off('focusin.bs.modal');
});

Answer 3

You want the user to be able to do other things even if the dialog box is opened , try to inspect element that dialog box .You will notice a div with class "modal-backdrop in" is being applied just before this dialog box div . Due to this class only the body content seems to freeze and you won't be able to click anywhere else in the document body .Remove this class and let user click anywhere and do whatever he wants in the DOM element .