Bootstrap modal toggle() 和 modal('show') 表现不同

Question

我正在使用引导程序 3.3.7，并且我有一个包含表单的模式对话框。为了验证表单，我使用 jquery 验证 1.16.0。

我用以下方式显示模态：

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

我为提交按钮的单击注册了一个函数，用于检查验证是否成功：

$('#myForm').valid()

如果是这样，则进行 ajax 调用。 提交按钮是这样启用的：

<button type="submit" id="btnDo" data-dismiss="modal" class="btn btn-primary">Do</button>

问题是即使表单验证失败，模式也会被关闭。如果再次显示模态框，则验证错误消息在那里，因此验证本身可以正常执行，只是对话框被关闭。

我设法通过显示模态来解决这个问题：

$('#myModal').toggle();

而不是模态（'show'）。 但是，出现了一个新的烦恼，模态不再可滚动，我必须通过设置 style="overflow-y: scroll;" 来解决这个问题在模态 div 上。

所以，我的两个问题是：

1. 使用 toggle() 显示模式与显示模式有什么区别？ modal('show')，当 表单验证失败？
2. 为什么使用 toggle() 会生成模态 不可滚动？

谢谢。

更新

根据要求，我包含了一些相关代码。

相关的 HTML：

<input type="button" id="btnShow" value="Show modal" />

<div id="myModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-body">
            <form id="myForm" class="well form-horizontal">
                <div class="form-group">
                    <label for="inputName">Name</label>
                    <div>
                        <input class="form-control"
                               required 
                               type="text"
                               id="inputName"
                               name="inputName"
                               data-val="true"
                               data-val-required="The name is required." />
                        <div class="text-danger" data-valmsg-for="inputName" data-valmsg-replace="true"></div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="submit" id="btnDo" data-dismiss="modal" class="btn btn-primary">Do</button>
        </div>
    </div>
</div>

脚本：

$('#btnShow').click(function() {
  $('#myModal').modal('show');
});

$('#btnDo').click(function() {
  console.log('Is my form valid? - ' + $('#myForm').valid());
});

Answer 1

用toggle() 和modal('show') 显示模态有什么区别...

jQuery .toggle() 只是显示和隐藏一个元素。 Bootstrap 的 .modal() 构造了一个模态......与简单地切换可见性不同。

...当表单验证失败时阻止模态框被关闭？

通过在按钮中使用data-dismiss="modal" 属性，您告诉.modal() 方法在单击按钮时关闭模式。它不在乎你里面有一个无效的表单。

从您的按钮中删除 data-dismiss="modal" 并仅在表单有效时以编程方式关闭模式。

submitHandler: function(form) { // only fires on valid form
    // handle your form submission:
    // $(form).submit(); // regular submission
    // OR
    // your Ajax         // Ajax submission

    // then close the modal
    $('#myModal').modal('hide');
}

为什么使用toggle() 会使模态不可滚动？

因为元素的大小是在构建页面时计算的。 .toggle() 方法使用初始大小，不考虑元素重新隐藏时的任何动态变化。

如果你想要一个模态，你应该按照设计使用.modal()，否则.toggle()你根本没有实现一个模态。