user3576600 user3576600 - 5 months ago 308
Javascript Question

how to create a non-modal bootstrap dialog box

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 http://refork.com/x657 but when I tried it, didn't work for me. The dialog refused to open

Thanks a lot.

Answer

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");
});