Question

当模态内容来自链接href时，我遇到了检测模态窗口中按下了哪个按钮的问题。我的真实代码都是动态生成的php，但我在下面用html包含了一个简单的例子。

我知道当你使用带有href的模态时，它会替换所有的“模态内容”，因此我猜测来自href的按钮在某种程度上没有被命名为我的想法或类似的东西。

可悲的是，我在这方面很陌生，昨天花了很多时间试图解决这个问题并且没有设法让它发挥作用。所以任何帮助都非常感谢。

button.html： -

$('#next').on('click', function(e){
    e.preventDefault();
});

注释掉按钮正确检测哪个按钮关闭了模态。

但是，当你使用href运行它时，它不起作用。

modal.html是： -

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
   <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   <style type="text/css">    
   </style>
   <title>Modal Button test with it loading another page (so some php code)</title>
<script type='text/javascript'>
$(window).load(function(){
    $('#myModal .modal-footer button').on('click', function (e) {
       var $target = $(e.target);
        $(this).closest('.modal').on('hidden.bs.modal', function (e) {
           alert('The buttons id that closed the modal is: #' + $target[0].id);
        });
    });
});
</script>
</head>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"> 
            <form class="form-horizontal" method="post" id="modal_form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Modal title main</h4>
                </div>
                <div class="modal-body">
                    <p>Some text from the modal code in the main html<p>
                </div>
                <div class="modal-footer">
                    <button type="button" name="in_reserve1" id="confirm-cancel-button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
                </div>
            </form> 
        </div>
        </div>        
    </div>    
</div> 

<a type="button" href="modal.html" class="btn btn-info btn-lg" data-toggle="modal" data-id="reservedb" data-target="#myModal">Doesn't Work</a>
<!-- <a type="button" class="btn btn-info btn-lg" data-toggle="modal" data-id="reservedb" data-target="#myModal">Works</a> -->

所以希望有人会指出我正确的方向来进行排序。

感谢。

Answer 1

模态中的按钮完全属于您自己（它们不会在脚本中生成，因此您可以随意使用它们）。

因此，对于取消按钮，您可以离开data-dismiss="modal"。到保存按钮，您可以调用代码，完成后，请致电hide方法。

示例：

＆＃13;
＆＃13;
$('#confirm-save-button').on('click', function() { alert('Saved!!'); $('#myModal').modal('hide'); });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

bootstrap模态检测当模态内容是链接href时按下哪个按钮

1 个答案: