在引导模式之外启用操作(单击、选择文本等)

Question

默认引导模式添加一个完整的页面元素，单击时将其关闭。使用 data-backdrop="static" data-keyboard="false"您可以禁用此功能，以便模式和 esc 键之外的单击不执行任何操作。

我想使用引导模式，它允许我单击、选择和执行页面上的所有正常功能而不会关闭它。关闭它的唯一方法是单击模态上的按钮(例如x或取消(。

如何使用这样的引导模式？

<!-- Example modal **without** the functionality I want -->
<div id="myModal" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Settings</h4>
            </div>
            <div class="modal-body">
                <p>Settings</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button id="loadpage" type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

Answer 1

我采取了三个步骤来达到预期的效果。我的模态是附加到正文前面的，如果你的不是，步骤可能会有所不同。

1. 引导程序将div元素附加到主体(body > .modal-backdrop(。它具有导致白色"叠加"效果的样式。可以删除整个元素或覆盖样式。
2. 将类添加到正文中，modal-open .这有 css overflow: hidden; .删除该类，或覆盖 css。
3. 实际的模态也需要添加一些css。 width或max-width为我工作。(使模态的滚动工作(
   • #myModal {max-width: 300px;}

不要对每个模态进行这些更改，而是使用触发器将它们限制为特定的模态。

$("#myModal").on("show.bs.modal shown.bs.modal", function(e) {
    // Remove overlay and enable scrolling of body
    $("body").removeClass("modal-open").find(".modal-backdrop").remove();
});

以上会导致一些"闪烁"与删除.modal-backdrop。如果不需要，最好使用 css 覆盖样式或阻止默认引导操作。

Answer 2

我没有看到针对您要求的解决方案，我需要具有此功能，我做了一个函数来做到这一点。它与jquery ui draggable元素一起工作，但你可以移出与之相关的任何代码，它也应该可以工作。

https://jsfiddle.net/wyf3zxek/

modalDraggableClickOutside('#modal-example', 'iframeLoaded', 'Modal shown');

请注意，它在iframe(例如js fiddle(中效果不佳：在iframe中，您需要移动模态一次