Bootstrap 动态显示模态

动态显示模态

关注

发信

关注(28)粉丝(399)

本文介绍了Bootstrap 动态显示模态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 JS 中动态添加了一个模态，方法是将它附加到我的页面正文中，但是当我调用以下代码时它没有显示.

$('#modalId').modal('show');

是不是因为html是动态添加的?如果是这样，我如何将模态显示附加到事件中?

这是我的模态


<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">分离站点</h4>
<div class="modal-body"><p>您确定要将以下站点服务器与此站点分离吗?</p><div class="form-group"><strong id="server-delete-name"></strong>

<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭<button id="delete-siteserver" type="button" data-delete-id="" class="btn btn-danger">分离</button>

我正在使用 $('body').append(); 将此模式附加到正文中；

解决方案

我是这样使用模态的.在页面的 HTML 中，我加载了模态的骨架:


<div class="modal-dialog"><div class="modal-content">

然后，在我的 ajax 中，我加载了模态的内容.我的意思是:


标题内容
<div class="modal-body" id="modal-body">正文内容
<div class="modal-footer">页脚内容

对于每个 ajax 调用，我将 <div class="modal-content"> 的内容替换为新结果.

希望能帮到你.

I'm adding a modal dynamically in JS by appending it to the body of my page but it is not showing when I call the following.

$('#modalId').modal('show');

Is this because the html is added dynamically? If so, how can I attach the modal show to an event?

here is my modal

<div id="modalId" 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">
            Detach Site</h4>
    </div>
    <div class="modal-body">
        <p>
            Are you sure you wish to detach the following Site Server from this site?</p>
        <div class="form-group">
            <strong id="server-delete-name"></strong>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
            Close</button>
        <button id="delete-siteserver" type="button" data-delete-id="" class="btn btn-danger">
            Detach</button>
    </div>
</div>

I am appending this modal to the body using $('body').append();

解决方案

I use the modal like this. In the HTML of the page I load the skeleton of the modal:

<div id="modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

Then, in my ajax, I load the content of the modal. I mean this:

<div class="modal-header">
    Header content
</div>
<div class="modal-body" id="modal-body">
    Body content
</div>
<div class="modal-footer">
     Footer content
</div>

And for every ajax call, I raplace the content of <div class="modal-content"> with the new result.

I hope it helps you.

这篇关于Bootstrap 动态显示模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-01 13:21