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

Thanks a lot.

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

Thanks a lot.

• javascript
• jquery
• twitter-bootstrap

• do you want something like bootbox? – Victor Commented Sep 4, 2014 at 16:20

7 Answers 7

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

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

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 .

Bootstrap 3 provides a parameter called backdrop that when set to static prevents the dialog from closing when clicked outside.

$('#myModal').modal({
  backdrop: 'static'
})

I solved it like that:

I created a modal-dialog without "modal" container:

<div class="modal-dialog" id="popup_tool_mouseposition" data-backdrop="false" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                <span>&times;</span>
            </button>
            <h4 class="modal-title" data-i18n="tool.mouseposition.title"></h4>
        </div>
        <div class="modal-body">HUHU</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" data-i18n="com.close"></button>
        </div>
    </div>
</div>

and now i stylied it like that... very cruel at this moment... i'll fix that later

$("#popup_tool_mouseposition").show();
$("#popup_tool_mouseposition").draggable({
    handle : ".modal-header"
});
$("#popup_tool_mouseposition").width(300);
$("#popup_tool_mouseposition").css('position', 'fixed');
$("#popup_tool_mouseposition").css('top', '0');
$("#popup_tool_mouseposition").css('left', '0');

draggable() comes from jqueryUI

    .modal-backdrop{
        display:none !important;
    }

css

// hide backdrop overlay:
.modal-backdrop {
    display: none !important;
}

// allow scroll
.modal,
.modal-open {
    overflow-y: auto;

    padding-right: 0 !important;
}

// place popup in the center, allow interaction with page under popup
.modal {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;

    transform: translate(-50%,-50%);
}

.modal-dialog {
    margin: 0 !important;
}

// change animation
.modal.fade .modal-dialog {
    transform: scale(.1, .1);
}

.modal.in .modal-dialog {
    transform: scale(1, 1);
}

js

// save focus and scroll position on popup close (otherwise button that triggered popup will take focus)
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
  var $this   = $(this);
  var href    = $this.attr('href');
  var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))); // strip for ie7

  $target.off('hidden.bs.modal');
});

// allow interaction with page under popup
$('.modal').on('shown.bs.modal', function(){
  $(document).off('focusin.bs.modal');
});