多个Bootstrap模式弹出窗口不工作

qrjkbowd 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(3)|浏览(128)

这是我的代码。

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

型

twitter-bootstrap

来源：https://stackoverflow.com/questions/47966185/multiple-bootstrap-modal-popups-not-working

3条答案

按热度按时间

62o28rlo1#

检查索引级别，你也必须使用一个锚，或者我应该建议，因为你是在第一个链接，而不是在第二个使用锚。
此外，您在那些h4's“#myModelLabel”（我相信这是名称）上声明了重复的ID，这可能会导致您出现一些问题或混淆，但我会更仔细地查看您的按钮链接/锚点是如何工作的，以及您的命名，这取决于您正在尝试做什么或是否想要相同。因为它们没有互相参照
编辑：
我认为你在Modal 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>

字符串
”

赞(0）回复(0）举报 2023-08-01

ctehm74n2#

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

字符串

赞(0）回复(0）举报 2023-08-01

w8biq8rn3#

我想明白了

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

字符串
感谢您的有效支持

赞(0）回复(0）举报 2023-08-01

我来回答

多个Bootstrap模式弹出窗口不工作

3条答案

相关问题

热门标签

最新问答