Question

我有一个boostrap面板，它变成了一个模态。我在同一页面上有一个表单，其中包含一个模式，看起来更像是基于我正在使用的主题的面板

我不知道如何在表单返回成功提交时加载模式我见过各种类似的问题，比如这个问题

Final: AJAX/jQuery/PHP Form submission and modal box open on success

这是一个按钮点击打开模态，但我不知道如何在ajax成功上做到这一点

小模态

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header">
            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
            <h4 class="modal-title">Small Modal</h4>
        </div>
        <div class="modal-body">...</div>
    </div>
  </div>
</div>

按钮显然是打开/关闭模态，但如何通过jquery控制模态

非常感谢你的帮助

Answer 1

    <div class="modal fade bs-example-modal-sm" id="modalExample" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header">
            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
            <h4 class="modal-title">Small Modal</h4>
        </div>
        <div class="modal-body">...</div>
    </div>
  </div>
</div>

将其命名为：$('#modalExample').modal();

Answer 2

您可以在Google和GetBootstrap上找到大量信息。这是一个简短的例子：

<强> HTML

<div class="modal fade bs-example-modal-sm" id="modalToDisplay" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header">
            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
            <h4 class="modal-title">Small Modal</h4>
        </div>
        <div class="modal-body">...</div>
    </div>
  </div>
</div>

<强> JS

function doAjaxCall() {
    $.ajax({
        type: "POST",
        url: "", //url to your page
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(datas) {

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

        }
    });
}

Bootstrap 3 - 如何在ajax提交后显示模态表单对话框

2 个答案: