Question

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

$('#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…</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');
    });
});

Bootstrap Modal无法通过javascript工作

1 个答案: