CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user3576600
user3576600

Reputation: 119

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

Thanks a lot.

Upvotes: 9

Views: 27854

Answers (7)

Vincent
Vincent

Reputation: 125

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

Upvotes: 2

Isk1n
Isk1n

Reputation: 381

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

Upvotes: 0

MrCADman
MrCADman

Reputation: 109

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

Upvotes: 0

wutzebaer
wutzebaer

Reputation: 14865

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

Upvotes: 0

Anand Sainath
Anand Sainath

Reputation: 1807

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

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

Upvotes: 0

collab-with-tushar-raj
collab-with-tushar-raj

Reputation: 1287

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 .

Upvotes: 1

pherris
pherris

Reputation: 17733

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

Upvotes: 3

Related Questions