12

我想使用 Ajax 在模态窗口中插入一些东西，所以我尝试手动打开模态窗口。代码看起来像这样

    $(function(){
        $('#modal-from-dom').modal({
            backdrop: true,
            keyboard: true
        });
        $('#modalbutton').click(function(){

            $('#my-modal').bind('show', function () {
                // do sth with the modal
            });
            $('#modal-from-dom').modal('toggle');

            return false;
        });
    });

HTML 是直接从 bootstrap js 页面复制的

<div id="modal-from-dom" class="modal hide fade">
    <div class="modal-header">
      <a href="#" class="close">×</a>
      <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
      <p>One fine body…&lt;/p>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn primary">Primary</a>
      <a href="#" class="btn secondary">Secondary</a>
    </div>
</div>
<button id="modalbutton" class="btn">Launch Modal</button>

所以问题是第一次单击按钮似乎工作得很好，第二次单击后模态窗口显示 1 秒左右然后消失。如果我将“切换”更改为“显示”，第二次单击后背景不会完全消失。我该如何调试呢？

4

4 回答 4

2

您当前执行操作的方式可能是闪烁的原因。本质上，您告诉浏览器的是：在显示 div 后更新内容。您还告诉 jQuery 每次单击链接时都绑定 onShow 事件。该绑定声明应在 onClick 事件之外进行。

您应该尝试的是在显示之前更改模态内容，允许浏览器在显示之前适当调整 DOM，减少（如果不消除）闪烁。

尝试更多类似的东西：

$(function(){
    $('#modal-from-dom').modal({
        backdrop: true,
        keyboard: true
    });
    $('#modalbutton').click(function(){

        // do what you need to with the modal content here

        // then show it after the changes have been made

        $('#modal-from-dom').modal('toggle');
        return false;
    });
});
于 2012-02-13T01:10:41.283 回答
1

<ul>||中的模态解决方案<ol>

就我而言，我在悬停时有一个口吃/闪烁/讨人喜欢的模式。解决方案是：不要将模态框放在使用 z-index 的元素内，例如，或者，将模态框的代码放在外面，如下所述：https ://github.com/twbs/bootstrap/issues/ 25206

于 2019-12-07T22:04:15.120 回答
0 
*if you get error like ... modal is not a function  so u can do like this also *

$("#open-modal").click(function () {
    // outhum credit
    $("#modal-from-dom").show();
    $(".modal").css("background", "#333333ab");
    return false;
  });
于 2020-06-25T07:40:41.000 回答
0

发生这种情况是因为 .list-gorup-item:hover 的 z-index: 1 会导致新的堆叠上下文。您可以使用 z-index:1 解决

.list-group-item, .list-group-item:hover{ z-index: 1 }
于 2020-09-20T10:30:35.477 回答