Question

模态引导程序在第二次调用时被锁定

我一直在Live Demo测试演示，当我按下“显示模态”按钮两次时它会锁定，我不能再按它了

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Bootstrap Modal with Dynamic content Using remote URL</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container ">
<div class="jumbotron"><a class="btn btn-primary pull-right" data-toggle="modal" href="#myModal" id="modellink">Show Modal</a></div>
<div class="modal-container"></div>
</div>
</body>
</html>

modalbox.php代码：

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Sample Model Box - Header Area</h4>
            </div>
            <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">Recipient:</label>
                    <input type="text" class="form-control" id="recipient-name">
                  </div>
                  <div class="form-group">
                    <label for="message-text" class="control-label">Message:</label>
                    <textarea class="form-control" id="message-text"></textarea>
                  </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

JavaScript代码：

<script type="text/javascript">
    $(document).ready(function(){
        var url = "modalbox.php";
        jQuery('#modellink').click(function(e) {
            $('.modal-container').load(url,function(result){
                $('#myModal').modal({show:true});
            });
        });
    });
</script>

Answer 1

测试这个https://www.w3schools.com/bootstrap/bootstrap_modal.asp，它使用按钮作为切换，你有这样的按钮代码：

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

Answer 2

我检查了你的代码。它看起来工作正常。您可以多次按下按钮，模式将继续出现。请尝试以下Plunker。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Simple Bootstrap Modal with Dynamic content Using remote URL</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var url = "modalbox.php";
      jQuery('#modellink').click(function(e) {
        $('.modal-container').load(url, function(result) {
          $('#myModal').modal({
            show: true
          });
        });
      });
    });
  </script>
</head>

<body>
  <div class="container ">
    <div class="jumbotron"><a class="btn btn-primary pull-right" data-toggle="modal" href="#myModal" id="modellink">Show Modal</a></div>
    <div class="modal-container">
      <div id="myModal" class="modal fade">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">Sample Model Box - Header Area</h4>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="control-label">Recipient:</label>
                  <input type="text" class="form-control" id="recipient-name">
                </div>
                <div class="form-group">
                  <label for="message-text" class="control-label">Message:</label>
                  <textarea class="form-control" id="message-text"></textarea>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save</button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</body>

</html>

Answer 3

<script type="text/javascript">
    $(document).ready(function(){
        var url = "modalbox.php";
        jQuery('#modellink').click(function(e) {
            $('#myModal').modal('dismiss');
            $('.modal-container').load(url,function(result){
                $('#myModal').modal({show:true});
            });
        });
    });
</script>

Modal Bootstrap在第二次调用时锁定

3 个答案: