如何创建非模态引导对话框

Question

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

我看到了一个链接https://snippet.run/x657，但是当我尝试它时，它对我不起作用。对话框拒绝打开

非常感谢。

Answer 1

根据文档，这似乎是不可能的 - 但是警报可能会满足您的目的：http://getbootstrap.com/javascript/#alerts 警报可以放入具有固定位置的 div 中，以保持它们可见并且独立于它们下面的内容。

Fiddle

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

Answer 2

一旦模态显示，只需执行以下行

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

举例：

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

Answer 3

您希望用户即使打开对话框也能做其他事情，请尝试检查该对话框的元素。您会注意到在此对话框之前应用了一个带有“modal-backdrop in”类的 div框 div 。由于这个类，只有正文内容似乎冻结了，您将无法单击文档正文中的任何其他位置。删除该类并让用户单击任何位置并在 DOM 元素中做任何他想做的事情。

Answer 4

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

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

Answer 5

我是这样解决的：

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

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

现在我把它设计成那样...此时非常残忍...我稍后会解决这个问题

$("#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() 来自 jqueryUI

Answer 6

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

Answer 7

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