Javascript 如何创建非模态引导对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25670148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to create a non-modal bootstrap dialog box
提问by user3576600
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/x657but when I tried it, didn't work for me. The dialog refused to open
我看到了一个链接http://refork.com/x657，但是当我尝试它时，它对我不起作用。对话框拒绝打开
Thanks a lot.
非常感谢。
采纳答案by pherris
Based on the docs this doesnt appear to be possible - however an alert might serve your purposes: http://getbootstrap.com/javascript/#alertsThe alert can be put into a div that has a fixed positioned to keep them visible and independent of the content beneath them.
根据文档，这似乎是不可能的 - 但是警报可能会满足您的目的：http: //getbootstrap.com/javascript/#alerts警报可以放入具有固定位置的 div 中，以保持它们的可见性和独立性他们下面的内容。
The html:
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):
和 JS 添加“模态”警报（您可以随意设置样式）：
$("#myBtn").click(function() {
$('<div class="alert alert-success alert-dismissable">'+
'<button type="button" class="close" ' +
'data-dismiss="alert" aria-hidden="true">' +
'×' +
'</button>' +
'modal info...' +
'</div>').appendTo("#alerts");
});
回答by Vincent
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');
});
回答by Tushar Raj
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 .
您希望用户即使打开对话框也能够做其他事情，请尝试检查该对话框的元素。您会注意到在此对话框 div 之前应用了一个带有“modal-backdrop in”类的 div。由于这个类，只有正文内容似乎冻结，您将无法单击文档正文中的任何其他地方。删除这个类，让用户单击任何地方并在 DOM 元素中执行他想做的任何事情。
回答by Anand Sainath
Bootstrap 3provides a parameter called backdropthat when set to staticprevents the dialog from closing when clicked outside.
Bootstrap 3提供了一个名为背景的参数，当设置为静态时，可防止对话框在外部单击时关闭。
$('#myModal').modal({
backdrop: 'static'
})
回答by wutzebaer
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>×</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
draggable() 来自 jqueryUI
回答by MrCADman
.modal-backdrop{
display:none !important;
}
回答by Isk1n
css
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
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');
});
