Question

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

我想使用一个bootstrap模式，它允许我点击，选择并执行页面上的所有常规功能而不解除它。解雇它的唯一方法是单击模态上的按钮（x或取消例如）。

我如何使用这样的bootstrap模式？

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

我采取了三个步骤来达到预期的效果。我的模态预先贴在身体上，如果你的模式没有，步骤可能会有所不同。

Bootstrap将div元素附加到正文（body > .modal-backdrop）。它具有导致白色“叠加”效果的样式。可以删除整个元素或覆盖样式。
将一个类添加到正文modal-open。这有css overflow: hidden;。删除该类，或覆盖css。
实际模态还需要添加一些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元素一起使用，但是您可以移出与此相关的任何代码，并且它也应该可以正常工作。

issue

<form id="myform">
        <input type="search" name="searchedValue">
        <input type="submit" value="Szukaj">
</form>


<script>
    $("document").ready(function() {
        $("#myform").submit(function(e) {
            var searchedValue = $("input[name='searchedValue']").attr("value");
            if (searchedValue) {
                window.location.href = "http://www.google.pl/#hl=plf&output=search&q="+searchedValue;
            } else {
                alert("empty string");
            }

            e.preventDefault();
        });
    });
</script>

请注意，它在iframe（例如js小提琴）中无法很好地工作：在iframe中，您需要移动modale一次

在bootstrap模式之外启用操作（单击，选择文本，诸如此类）

2 个答案: