bootstrap 模态检测当模态内容是一个 link href 时按下了哪个按钮

Question

当模态内容来自 link href 时，我在检测模态 window 中按下了哪个按钮时遇到问题。我的真实代码都是 php 动态生成的，但我在下面包含了一个使用 html.

的简单示例

我知道，当您将模式与 href 一起使用时，它会替换所有 'modal-content'，因此我猜测来自 href 的按钮不知何故未命名为我想的或类似的东西那。

遗憾的是，我在这方面还很陌生，昨天花了很长时间试图解决这个问题，但一直没能成功。所以非常感谢任何帮助。

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

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

但是，当您运行带有 href 的那个时，它不起作用。

modal.html 是：-

<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 url</h4>
    </div>
    <div class="modal-body">
        <p>Some text from the modal code in the href url<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>

所以希望有人能指出正确的方向来解决这个问题。

谢谢。

Answer 1

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

因此，对于取消按钮，您可以保留data-dismiss="modal"。对于 save 按钮，您可以调用您的代码，完成后调用 hide 方法。

示例：

$('#confirm-save-button').on('click', function() {
  alert('Saved!!');
  $('#myModal').modal('hide');
});

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

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</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>

bootstrap 模态检测当模态内容是一个 link href 时按下了哪个按钮

bootstrap modal detecting which button is pressed when the modal content is a link href

html

javascript

jquery

bootstrap-modal

twitter-bootstrap-3