如何创建非模态引导程序对话框 [英] 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.

我看到一个链接 http://refork.com/x657 但是当我尝试它时，并没有为我工作。对话框拒绝打开

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

非常感谢。

推荐答案

基于在文档中，这似乎不可能 - 但是警报可能符合您的目的： http://getbootstrap.com/ javascript /＃alerts 可以将警报放入具有固定位置的div中，以使其保持可见并独立于其下方的内容。

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.

小提琴

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>

和JS添加'模态'警报（你可以随意设置样式）：

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

这篇关于如何创建非模态引导程序对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！