Question

我使用Bootstrap 3创建模态表单。在用户单击按钮打开模态之前，有一个字段验证。

如果有效则显示模态，否则会阻止显示模态。

问题在于第二次机会，用户点击按钮并且模式不会显示。如何解决这个问题？

显示模态并阻止显示模态的代码：jsfiddle

$("#btnLookupClient").click(function (e) {
    if ($("select[name='OfficeID'] option:selected").index() <= 0) {
        alert("Please select office");
        $("#OfficeID").focus();
        $("#clientModal").on("show.bs.modal", function (e) {
            return e.preventDefault() // stops modal from being shown
        });
    } else {
        var url = '@Url.Content("~/Client/Search?officeID=")' + $("#OfficeID").val();
        $.get(url)
            .done(function (data) {
                $("#lookup-client-container").html(data);
                $("#clientModal").modal(show = true, backdrop = true);
            });
    }
});

Answer 1

当警报显示时，您将preventDefault绑定到显示模态的事件，因此即使验证通过，它也不会再次显示。

我建议使用.one（）函数代替.on（）http://api.jquery.com/one/

此外，你的模态会在不必在javascript中调用它，因为你将切换设置为模态，目标设置为模态id。

Answer 2

使用一个（）而不是on（）。

$("#clientModal").one("show.bs.modal", function (e) {
            return e.preventDefault() // stops modal from being shown
        });

见这里：http://jsfiddle.net/akcbj4n5/1/
另请参考：Difference between jQuery.one() and jQuery.on()

Bootstrap模式在被阻止打开后不会显示

2 个答案: