引导模式在单击时打开并保持打开状态 10 秒

Bootstrap modal open on click and stays open for 10 sec

本文关键字：状态 单击 模式      更新时间：2023-09-26

我想在单击时打开模态，在模态中我有表单和提交按钮。当用户填写表单时，我想显示消息，如果提交为真或伪造，并在 10 秒后自动关闭模式。

这是我现在的代码，一切正常，但即使我不点击按钮，我的模态也会打开。

网页代码：

<a href="#insert_poslovni" class="btn btn-default btn-sm" data-toggle="modal" id="insert_p">Unos</a>

JS代码：

<script>
    $(function(){
        //instantiate your content as modal
        $("#insert_poslovni").modal({
            //modal options here, like keyboard: false for e.g.
        });
    setTimeout(function() {$("#insert_poslovni").modal("hide");}, 10000);;
        //show the modal when dom is ready
        $("#insert_poslovni").modal("show");
    });
</script>

这样的东西？ http://jsfiddle.net/swm53ran/148/

$(document).ready(function() {
    $('.open').on('click', function() {
        $('#myModal').modal('show');
    });
    $('.submit').on('click', function (e) {
        e.preventDefault();
        setTimeout(function() {
            $('#myModal').modal('hide');
        }, 10000);
    });
});
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg open">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary submit">Submit</button>
      </div>
    </div>
  </div>
</div>

更改为：

$(function(){
    $("#insert_poslovni").modal({ //modal options });
    $("#submitbuttonid").on('click', function(e){
        setTimeout(function() {$("#insert_poslovni").modal("hide");}, 10000);
    e.preventDefault();
    });
});

这仅在单击按钮后启动代码您还可以通过设置和ID将相同的功能添加到关闭按钮

http://jsfiddle.net/ge0g8kbc/25/

使用你的js Fiddle，这里是更新的工作版本：http://jsfiddle.net/pzaLqxL2/2/

e.preventDefault()为小写"p"

$(function(){
    $("#insert_p").click(function(){
        // rest of code in here
        $("#insert_poslovni").on("hide.bs.modal", function(e){
            if($("#insert_poslovni").data("prevented") !== "prevented"){
                $("#insert_poslovni").data("prevented", "prevented");
                e.preventDefault();
                setTimeout(function() {$("#insert_poslovni").modal("hide");}, 10000);
            }
            else{
                $("#insert_poslovni").data("prevented", "");
            }
        });
    });
});
相关文章：