Javascript 如何创建非模式引导对话框

我正在尝试创建一个非模式引导对话框。我只是不知道怎么做。 我查了很多帖子，但没有一个能回答我的问题。我需要的对话框是非模态的，因为我希望用户能够做其他事情，即使对话框被打开

我看到一个链接，但当我尝试它时，对我无效。对话框拒绝打开

---

非常感谢。

根据文档，这似乎是不可能的-但是警报可能会满足您的目的：警报可以放在一个具有固定位置的div中，以使其可见，并且独立于其下的内容

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添加了“模态”警报（您可以随意设置样式）：

$（“#myBtn”）。单击（函数（）{
$(''+
'' + 
“×；”
'' + 
“模态信息…”
''）。附于（“#警报”）；
}); 

如果希望用户能够在对话框打开的情况下执行其他操作，请尝试检查该对话框中的元素。您会注意到，在该对话框div之前应用了一个类为“modal Background in”的div。由于该类，只有正文内容似乎冻结，您将无法单击文档正文中的其他任何位置。请删除该类，让用户在DOM元素中单击任何位置并执行任何操作

显示模式后，只需执行以下行即可

$(document).off('focusin.bs.modal');

举例来说：

$("#my-modal").on('shown.bs.modal',function(){
    $(document).off('focusin.bs.modal');
});

提供一个名为background的参数，当设置为static时，该参数可防止在外部单击时关闭对话框

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

我是这样解决的：

我创建了一个没有“模态”容器的模态对话框：

<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>

draggable（）来自jqueryUI

css

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

js

---

您想要类似的内容吗？不，因为单击旁边的模式将关闭它：）。请在回答中提供一些解释；）

$("#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');

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

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

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