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

Posted 2023-05-09

【中文标题】Bootstrap modal toggle() 和 modal(\'show\') 表现不同

【英文标题】：Bootstrap modal toggle() and modal('show') behaving differentlyBootstrap modal toggle() 和 modal('show') 表现不同

【发布时间】：2017-10-04 23:00:10

【问题描述】：

我正在使用引导程序 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 上。

所以，我的两个问题是：

使用 toggle() 显示模式与显示模式有什么区别？ modal('show')，当 表单验证失败？ 为什么使用 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());
);

【问题讨论】：

另外，这里显示的代码不足以重现演示。

@Sparky 这是一个错字，它是“#myForm”，验证工作正常。我包括了一些相关的代码。谢谢。

FYI - .toggle() 只是一个 jQuery 方法，用于切换隐藏元素的可见性......它与模式没有任何特定关系。

...因此我感到困惑。 :) 但是我猜 .modal('show') 不仅仅是显示模态...

默认情况下，模式的按钮可能设置为始终在click 时关闭它，而不考虑您希望在验证失败时保持打开状态。同样，请参阅.modal() 方法的选项，以使其即使在与按钮交互时也保持打开状态。然后在.validate() 方法中，您可以在submitHandler 中以编程方式将其关闭。

【参考方案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()你根本没有实现一个模态。

【讨论】：

此信息的来源？