繁体   English   中英

引导多个模型弹出窗口不起作用

[英]Bootstrap multiple model popup not working

这是我的代码。

<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 =“ myModal1”时,会发生什么,但是我无法访问其中的按钮,当我单击id =“ myModal2”时,它运行良好。 我不知道我在想什么吗?

我通过HTML调用模式

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

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

检查索引级别,也必须使用锚点,或者我建议使用索引,因为您要在第一个链接上而不是在第二个链接上使用锚点。

另外,您在这些h4's “ #myModelLabel”上声明了重复的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>

`

我想通了,

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

感谢您的有效支持

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM