如何在bootstrap中打开一个通过 AJAX 加载的modal？

vxbzzdmp 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(3)|浏览(118)

我调用了一个div，其中的modal是通过 AJAX 实现的。一旦div和它的modal被加载，按钮就不会打开modal。下面的代码是模态结构，它只是bootstrap中的一个普通模态，并且已经通过 AJAX 加载：

<div class="ajax-loaded-item">
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="myModalZ">Large modal</button>

 <div class="modal fade" id="myModalZ" tabindex="-1" role="dialog" aria-labelledby="myModalLabelZ" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="myModalLabelS">Filter our work</h2>
            </div>
            <div class="modal-body">
                Content.....
            </div>
        </div>
    </div>
 </div>
</div>

字符串
如果我需要重新加载bootstrap.js，其中模态jQuery是因为内容现在通过 AJAX 加载，那么在我自己的ajax回调之后，我可以做一种init模态调用吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/28495266/how-to-open-a-modal-in-bootstrap-if-this-is-loaded-via-ajax

3条答案

按热度按时间

lf5gs5x21#

你可以使用jQuery打开modal：

$(document).ready(function(){
    $('button[data-target="myModalZ"]').click(function(){
        $('#myModalZ').modal('show');
    });
});

字符串
更多文档在这里。

已编辑：

$(document).ready(function(){
    $('button[data-target="myModalZ"]').click(function(){
        if($('#myModalZ').length){
           $('#myModalZ').modal('show');
        } else {
           alert('Your message');
        }
    });
});

型

赞(0）回复(0）举报 2023-08-01

qeeaahzv2#

首先将接收到的内容附加到正文中的某个位置。然后手动触发模态。

$.ajax(
    {
        url: "http://www.example.com/someAPI", 
        success: function(result){
            // Append content somewhere

            // Init button click event once your content is ready
            $('button[data-target="myModalZ"]').click(function(){
                $('#myModalZ').modal('show');
            });

    }
});

字符串
请在这里查看完整的文档。

赞(0）回复(0）举报 2023-08-01

7lrncoxx3#

**自Bootstrap v5.0+**起，它们改变了从JavaScript启动模态的方式（请参阅此处）。

现在，为了启动模态，语法如下：

const modal = new bootstrap.Modal('#myModal', options);
modal.show();

字符串
在同一页上，它解释了可选的“选项”参数是什么。

赞(0）回复(0）举报 2023-08-01

我来回答

如何在bootstrap中打开一个通过 AJAX 加载的modal？

3条答案

相关问题

热门标签

最新问答