Question

我在同一页面上有2个bootstrap模型，第一个模态打开并按预期运行。在第一个模态中保存表单数据后，可以看到一个按钮以打开第二个模态。 按钮无法点击：

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

我发现一些在同一页面上有两个模态有类似问题，但似乎没有常见原因。我怎样才能解决这个问题？我希望按钮能够工作。如果由于某种原因它是不可能的，我可以在第一个关闭后自动打开第二个模态。我也没有成功地将其付诸实践。我已经三次检查我的所有标签是否已关闭且间隔正确。为简洁起见，我在下面的代码中省略了很多形式内容。我还在页面末尾包含了我的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>

＆＃13;

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

＆＃13;

第二个Bootstrap模式的按钮不起作用（不可点击）

1 个答案: