Question

我想在点击上打开模态，在模态中我有表单并提交按钮。当用户满足表格时，如果提交为真或者是fals，我想显示消息，并在10秒后自动关闭模态。

这是我现在的代码，一切都很好但我的模态打开，即使我不点击按钮。

HTML代码：

<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>

Answer 1

更改为：

$(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/

Answer 2

这样的事情？ 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>

Answer 3

使用你的js小提琴，继续更新的工作版本：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", "");
            }
        });
    });

});

Bootstrap模态在点击时打开并保持打开状态10秒

3 个答案: