提交后如何关闭引导模式？

Posted 2023-05-08

【中文标题】提交后如何关闭引导模式？

【英文标题】：How to close the Bootstrap modal after submit?

【发布时间】：2020-11-26 08:08:17

【问题描述】：

这里我有一个 Bootstrap 模式。我的要求是当我使用提交按钮成功提交表单时，我想在几秒钟后关闭模式。这里的问题是当我在输入中输入一些文本而不是整数时，或者如果我输入了一些无效的输入，然后当我单击提交按钮时，输入字段会显示错误，并且模式会在几秒钟后立即关闭。我>

如果单击提交按钮时输入字段无效，我不想关闭引导模式。

我该怎么做？

编辑：它与有效输入完美配合。

html

 <div class="modal-body">
 <form action="">
     <input type="number" name="rows" min="0" value="0" max="10" required><br>
     <button type="submit" id="my_button" class="btn btn-info btn-sm">Submit</button>
 </form>
 </div>

脚本

<script>
 $('#my_button').click(function() 
    setTimeout(function() $('#myModal').modal('hide');, 4000);
);
</script>

【问题讨论】：

输入有效输入时会发生什么。弹出窗口会在 4 秒后关闭吗？

@Vaibhav 是的，它适用于有效输入

【参考方案1】：

如果表单包含无效值，请不要设置超时：

$('#my_button').click(function() 
  if ( ! $('form input:invalid' ).length ) 
    setTimeout(function() $('#myModal').modal('hide');, 4000);
  
);

【参考方案2】：

请试试这个代码sn-p

<div class="modal-body">
    <form action="">
        <input type="number" name="rows" min="0" value="0" max="10" required><br>
        <button type="submit" id="my_button" class="btn btn-info btn-sm">Submit</button>
    </form>
</div>

<script>
 $('#my_button').click(function() 
    setTimeout(function() $('#myModal').modal('toggle');, 4000);
);
</script>

【讨论】：

这段代码和原来的问题有什么不同？