Question

我的页面上有一个模态，其内容根据点击的两个按钮中的哪一个而变化（<input />的值更改）。为了更好地添加功能，我设置了一个额外的块，如果出现错误，应该手动打开Modal。

为确保表单“粘滞”，我手动触发相应按钮上的click事件，而不是。但是，当我手动触发click事件时，Bootstrap不会向正文添加.modal-open。由于我的网站是如何构建的，身体上没有.modal-open，因此模态完全隐藏在其他内容之后。

显然我做错了什么，但我不知道。这是我的代码的副本：

<?php
$modalerror = false;
$id = 0;
if (/*Basic check for errors*/) {
    $modalerror = true;
    $id = /*Get the correct id*/;
}
?>
<script type="text/javascript">
    jQuery( document ).ready(function($) {
        $('#modal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);

            if (button.attr('data-name') && button.attr('data-name') != '') {
                $('#name').val(button.attr('data-name'));
            } else {
                $('#name').val('');
            }
        });
    });

    <?php if ($modalerror) { ?>
        jQuery ( window ).load(function() {
            jQuery('button[data-id=<?php echo $id; ?>]').trigger('click');
        });
    <?php } ?>
</script>

经过进一步的检查/进展，我注意到我在页面/后面的其他地方以完全相同的方式手动触发模态，将.modal-open类添加到正文中没有任何问题。代码示例：

<script type="text/javascript">
    function manualOpen(id) {
        jQuery('button[data-id="'+id+'"]').trigger('click');
    }
</script>
<button type="button" onclick="manualOpen(/*Correct id*/);">Open</button>

更多测试，我在页面中添加了第二个模式，其内容完全不同，在非常特定的情况下自动打开，不需要根据按钮data-*属性加载自定义内容。如果它没有某种形式的超时（如我对这个问题的评论中提到的那样），那么第二个Modal会遇到完全相同的问题。

Answer 1

使用引导程序4，在不使用超时的情况下，IMO的最佳方法是在模式的关闭事件中添加一个函数。

当一个模态正在关闭并且在完成关闭动作之前有一个命令打开另一个模态时，新的模态是打开的，但是类.modal-open没有添加到主体中。

下一个函数打开模态，检查是否有打开的模态。根据情况，将直接打开新模式或在关闭事件回调中打开新模式。此功能要求每个模式都有一个ID。

react-navigation

Answer 2

我正在使用Bootstrap 4.1.1和jQuery 3.3.1，并且遇到相同的问题。 50ms未能解决问题。因此，我不得不将其提高到500毫秒，并且有效！

//hide first
$('#modal1').modal('hide');
//add delay when showing next modal
setTimeout(function () {
  $('#modal2').modal('show');
}, 500);

Bootstrap Modal在通过Javascript

2 个答案: