jquery - Bootstrap Modal 无法通过 javascript 工作

Question

我通过函数内部的 jquery 调用引导模式以获取错误消息，如下所示：

$('#validateButton').click(function() {

    var registrationLocation = $('#url').val();

    if (registrationLocation.indexOf("http") ==0) {
        // TODO - hardcoded DataFlow - this MUST be fixed!
        var hc06DfUrn = "urn:sdmx:org.sdmx.infomodel.datastructure.Dataflow=ESTAT:HC06(1.0)";
        $.getJSON("/" + webappName + "/ws/rest/registerservice?url=" + registrationLocation + "&dataflowurn="+hc06DfUrn, registerFileSuccess).error(displayErrorDialog);
    } else {
        $.getJSON("/" + webappName + "/ws/rest/registerfile?url=" + registrationLocation, registerFileSuccess).error(displayErrorDialog);
    }
    $('#errorDialog').modal('show')
});

这是我html的模态：

<div id="errorDialog" class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
        </div>
            <div class="modal-body">
            <p>One fine body…&lt;/p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
  </div>

我看到了淡入淡出效果，但是当我检查页面上的 html 时，模态似乎为空：

<div class="modal-backdrop fade in">
    <div></div>
</div>

有任何想法吗？

Answer 1

您需要为要放置的模态主体（容器）创建一个 DIV：

<div class="modal-backdrop fade in" id="myModal">
    <div id="myModalContainer"></div>
</div>

然后单击按钮将模态体传递到容器 DIV 中：

$('#validateButton').click(function () {
    var url = "/SomeModal/Url";
    $.get(url, function (data) {
        $('#myModalContainer').html(data);
        $('#myModal').modal('show');
    });
});