第一次模型关闭后，第二个Bootstrap模型会自动打开

时间：2018-04-13 13:06:16

标签： jquery twitter-bootstrap bootstrap-modal

这是代码。

＆＃13;
＆＃13; 
jQuery(document).ready(function() {
    $('body').on('click', '#saves', function(event){
	      event.preventDefault();
	      $('#exampleModal').modal('hide');
	      $("#exampleModal").on("hidden.bs.modal",function(){
	          $('#Newmodel').modal('show')
  	    });
    });
});
＆＃13; 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Modal</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="">
    </head>
    <body>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
        </button>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" id="saves" class="btn btn-primary">New Model</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="Newmodel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

我有与链接代码相同的代码，除了在success函数中还有ajax请求和jquery。在第一个模型中，如果我提交，则它触发ajax请求，并在成功函数中，根据jquery代码，关闭第一个模态并打开第二个模态和消息。在第一次打开第二个模态时，没有问题。

问题是我第二次打开第一个模态，之后如果我不想要ajax请求，如点击提交，发送数据并关闭现有模态并打开新模态。所以我点击关闭按钮或页面的任何外部区域。所以第二个模态不应该打开因为没有触发第二个模态。但它仍然关闭第一个模态并打开第二个模态。

我不知道为什么会在第一次运行后发生这种情况。除了提交点击，我不想打开第二个模态。我也没试过＆＃34; hidden.bs.modal（）＆＃34;功能但在该方法中滚动条适用于除模态之外的背景页面。 如果没有背景滚动，我怎么能这样做？

1 个答案:

答案 0 :(得分：0)

你的问题似乎是不断被触发

$("#exampleModal").on("hidden.bs.modal",function() {

我很好奇是否有链接事件的方法。就像你有一个onclick和hidden.bs.modal事件一样，做点什么。那是你想要做的吗？您拥有它的方式将始终在该条件下运行代码，尽管它处于其他事件条件内。

以下按照您的方式工作：

＆＃13;
＆＃13; 
jQuery(document).ready(function() {
    $('body').on('click', '#saves', function(event){
	      event.preventDefault();
	      $('#exampleModal').modal('hide');
	      $('#Newmodel').modal('show');
    });
});
＆＃13; 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Modal</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="">
    </head>
    <body>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
        </button>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" id="saves" class="btn btn-primary">New Model</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="Newmodel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题