javascript - 第二个 Bootstrap 模式的按钮不起作用(不可点击)

Question

我在同一页面上有 2 个 Bootstrap 模型，第一个模型按预期打开并运行。在第一个模式中保存表单数据后，可以看到一个按钮来打开第二个模式。 但是该按钮不可点击:

<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>

我发现一些人在同一页面上的两个模态中遇到类似的问题，但似乎没有共同的原因。我怎样才能解决这个问题？我最好希望按钮能够工作。如果出于某种原因这是不可能的，我可以让 JS 在第一个模态关闭后自动打开第二个模态。我也没有成功地让它发挥作用。我已经三次检查我的所有标签是否已关闭且间隔正确。为了简洁起见，我在下面的代码中省略了模式中的许多表单内容。我还在页面末尾添加了 JS，用于指示模态的可见性。

    <div class="add_left"> 
      <div id="crop-avatar" class="container">
        <div class="bigpicture"> <img src="" > </div>
        <div class="avatar-view" title="Add new listing"> <img src="../0images/cropy.jpg" alt="Listing Image" width="400px"</div>
    <!-- modal 1 -->
        <div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <form name="avatar-form" class="avatar-form" method="post" action="crop-avatar.php" enctype="multipart/form-data">
                <div class="modal-header"> </div>
                <div class="modal-body">
                  <div class="avatar-body">
                    <div class="row"> </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
                  <button id="nxtbutt" class="btn btn-primary avatar-save" disabled type="submit">Save Image</button>
                </div>
              </form>
              <div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="add_right">
      <h4 class="instructiondata" style="padding-top:20px">Click the button below to add your pdf file and data:</h4>
      <button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
    <!-- modal 2 -->
      <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
          <div class="modal-content">
            <form name="data-form" class="data-form" method="post" action="add_data.php" enctype="multipart/form-data">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel"></h4>
              </div>
              <div class="modal-body">
                <h2>Listing Designation</h2>
                <fieldset style="padding-left:5px;">
                  <legend> Designation </legend>
                </fieldset>
              </div>
              <div class="modal-footer">
                <input class="avatar-src" name="avatar_src" type="hidden">
                <input type="hidden" name="id" value="">
                <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
                <button id="nxtbutttwo" class="btn btn-primary avatar-save" type="submit">Save Listing</button>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
          </div>
        </div>
      </div>
    </div>
    <script Content-Type: application/javascript src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script>
    $("#avatarInput").on("change", function() {
        $("#nxtbutt").prop('disabled', !$(this).val()); 
    }); 
        $(document).ready(function(){
            $(".add_right").hide();
            $(".add_display").hide();
            $(".bigpicture").hide();
            $(".instructiondata").hide();
        });
            $( "#nxtbutt" ).click(function () {
                $(".add_right").show();
                $(".bigpicture").show();
                $(".add_display").hide();
                $(".avatar-view").hide();
                $(".instruction").hide();
                $(".instructiondata").show(); 
            });
                $( "#nxtbutttwo" ).click(function () {
                    $(".add_right").show();
                    $(".add_display").show();
                });
    </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 

提前谢谢您!

Answer 1

这里不要使用show()和hide()。 您可以使用 modal 方法关闭和打开:

$("#secondModalButton").click(function() {
    $("#firstModal").modal('hide');
    $("#secondModal").modal('show');
});

或者(我刚刚注意到)你可以纯粹使用 Bootstrap 属性来做到这一点:

<button type="button" class="btn btn-primary" id="secondModalButton" 
    data-dismiss="modal" 
    data-toggle="modal"
    data-target="#secondModal">Second modal</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#firstModal">
  Launch first modal
</button>

<!-- First Modal -->
<div class="modal fade" id="firstModal">
  <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">
        First Modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="secondModalButton" data-dismiss="modal" data-toggle="modal" data-target="#secondModal">Second modal</button>
      </div>
    </div>
  </div>
</div>

<!-- Second Modal -->
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="secondModal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        Second modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>