Question

这是我的代码。

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" id="myModalLabel">Modal 1</h4>
      </div>

      <div class="modal-body">
        <form role="form" action="#" method="post">
       <input type="text" class="form-control" placeholder="Username">
      </div>
      <div class="modal-footer">
        <a href="#myModal2"><button type="button" class="btn btn-primary" >Sign In Now</button></a>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
        </form>
    </div>
  </div>
</div>

  <!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" id="myModalLabel">Modal 2</h4>
      </div>

      <div class="modal-body">
        <p>Sign In Error</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
        </form>
    </div>
  </div>
</div>

当我点击id =＆＃34; myModal1＆＃34; popUp正在打开，但当我点击id =＆＃34; myModal2＆＃34;时，我无法访问其中的按钮。它运作良好。我不知道我错过了什么帮助？

我通过HTML调用模态

<a class="select-bt-size" data-toggle="modal" data-target="#myModal1">Model Pop-up</a>

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<a class="select-bt-size" data-toggle="modal" data-target="#myModal1">Model Pop-up</a>
<a class="select-bt-size" data-toggle="modal" data-target="#myModal2">Model Pop-up</a>

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" id="myModalLabel">Modal 1</h4>
      </div>

      <div class="modal-body">
        <form role="form" action="#" method="post">
       <input type="text" class="form-control" placeholder="Username">
      </div>
      <div class="modal-footer">
        <a href="#myModal2"><button type="button" class="btn btn-primary" >Sign In Now</button></a>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
        </form>
    </div>
  </div>
</div>

  <!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" id="myModalLabel">Modal 2</h4>
      </div>

      <div class="modal-body">
        <p>Sign In Error</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
        </form>
    </div>
  </div>
</div>

Answer 2

检查索引级别，你也必须使用一个锚，或者我应该建议，因为你在第一个上链接而在第二个上没有使用锚点。

此外，您在 h4's＆＃34;＃myModelLabel＆＃34;上声明了重复的ID。（我相信这个名字）它可能会引起一些问题或混乱，但我会更仔细地看看你的按钮链接/锚点是如何工作的，以及你的命名，取决于它是什么你是想尝试做什么，或者你想要做同样的事情。因为他们没有引用彼此。

编辑：

我认为当你关闭第一个时，你在模态2上错过了一个FORM开始标记，它只是一个空的结束标记。或者摆脱它。各种检查此代码以获得更好的示例。

`

<!doctype html>
<html lang="en">
<head>
<title>EXAMPLE WORKING - ROUGH EX. 1 </title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div>
<!--Start Container-->
<h2>Here's a better Example</h2>
 <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch A myModal</a>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Modal 1 Container</h4>
            </div>
            <div class="container"></div>
            <div class="modal-body">Content for the dialog / modal goes here.
                <br>
                <br>
                <br>
                <p>more content</p>
                <br>
                <br>    
               <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
            </div>
            <div class="modal-footer">  <a href="#" data-dismiss="modal" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade rotate" id="myModal2">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">× | Close</button>
                    <h4 class="modal-title">myModal 2</h4>
            </div>
            <div class="container"></div>
            <div class="modal-body"><br>
                <p>Body Container for Modal Right HERE, as long as <br>
                your href equals your #idName with a<br>
                <pre>data-toggle="modal"</pre> action
                <br>
                <p>Modal 2 Modal</p>
                <br>
                </p>
               <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Click 4 myModal3 Modal</a>
           </div>
            <div class="modal-footer">  
              <a href="#" data-dismiss="modal" class="btn">Close</a>
              <a href="#" class="btn btn-primary">Save changes</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal3">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
               <h3 class="modal-title">Modal #3</h3>

            </div>
            <div class="container"></div>
            <div class="modal-body">Content for the dialog / modal goes here.
                <br>
                <br>
                <br>
                <br>
                <br>    
         <a data-toggle="modal" href="#myModal4" class="btn btn-primary">Launch modal</a>
            </div>
            <div class="modal-footer">  
           <a href="#" data-dismiss="modal" class="btn">Close</a>
       <a href="#" class="btn btn-primary">Save changes</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal4">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 class="modal-title">Modal #4</h3>
            </div>
            <div class="container"></div>
            <div class="modal-body">ADD Your Content for 4 Here.</div>
            <div class="modal-footer">  
                <!--Dismiss -->
                <a href="#" data-dismiss="modal" class="btn">Close</a>
             <a href="#" class="btn btn-primary">Save changes</a>
            </div>
        </div>
    </div>
</div>
</div>
<script>
$(document).ready(function () {
    $('#openBtn').click(function () {
        $('#myModal').modal({
            show: true
        })
    });
        $(document).on('show.bs.modal', '.modal', function (event) {
            var zIndex = 1040 + (10 * $('.modal:visible').length);
            $(this).css('z-index', zIndex);
            setTimeout(function() {
                $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
            }, 0);
        });
});
</script>
</body>
</html>

`

Answer 3

我想通了，

   $('body').removeClass("modal-open");
   $('body').css("padding-right","");

感谢您的有效支持

Bootstrap多个模型弹出窗口无法正常工作

3 个答案: