两个模态 - 一页。打开相同的模态

问题描述 投票：1回答：1

我正在为一个非常小的网站弄湿我的脚。我是HTML，CSS，JS，Bootstrap等全新的。我去的时候自学。那说......

我试图让这个页面有两个单独的模态，每个模式都有不同的信息。

我遇到的问题是它一直显示第一个模态而不是第二个模态。我一直在寻找几个小时并尝试不同的代码，试图了解我做错了什么，所有文章和模态形式的例子都说改变了ID。我做过的。

任何帮助，将不胜感激！谢谢！

<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <title>Hello, world!</title>
   </head>
   <body>
      <div class="text-center">
         <a href="" class="btn btn-default" data-toggle="modal" data-target="#modalContactForm">Launch
         Modal Form 1</a>
      </div>    
      <div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
         <div class="modal-dialog" role="document">
            <div class="modal-content">
               <div class="modal-header text-center">
                  <h4 class="modal-title w-100 font-weight-bold">Write to us</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                  </button>
               </div>
               <div class="modal-body mx-3">
                  <div class="md-form mb-5">
                     <i class="fas fa-user prefix grey-text"></i>
                     <input type="text" id="form34" class="form-control validate">
                     <label data-error="wrong" data-success="right" for="form34">Your name</label>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="text-center">
         <a href="" class="btn btn-default" data-toggle="modal" data-target="#modalContactForm2">Launch
         Modal Form 2</a>
      </div>
      <div class="modal fade" id="modalContactForm2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
         <div class="modal-dialog" role="document">
            <div class="modal-content">
               <div class="modal-header text-center">
                  <h4 class="modal-title w-100 font-weight-bold">Test of 2nd modal</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                  </button>
               </div>
              
              <p> This is a random test </p>
              
            </div>
         </div>
      </div>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      <script>
         (function(){
         
             var template = null
         
             $('.modal').on('show.bs.modal', function (event) {
                 if (template == null) {
                     template = $(this).html()
                 } else {
                     $(this).html(template)
                 }
                 // other initialization here, if you want to
             })
         
         })()
      </script>
   </body>
</html>
jquery css modal-dialog bootstrap-modal
1个回答
1
投票

问题是页面末尾的JavaScript代码段。

按钮打开正确的模态。但是你最后的代码片段是在打开时复制一个模态的内容，然后在打开第二个模态时用它来覆盖第二个模态。

您可以完全删除代码段，或者将其替换为不使用全局变量的代码段。我会用$.data()将它存储在.modal元素本身上：

<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <title>Hello, world!</title>
   </head>
   <body>
      <div class="text-center">
         <a href="" class="btn btn-default" data-toggle="modal" data-target="#modalContactForm">Launch
         Modal Form 1</a>
      </div>    
      <div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
         <div class="modal-dialog" role="document">
            <div class="modal-content">
               <div class="modal-header text-center">
                  <h4 class="modal-title w-100 font-weight-bold">Write to us</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                  </button>
               </div>
               <div class="modal-body mx-3">
                  <div class="md-form mb-5">
                     <i class="fas fa-user prefix grey-text"></i>
                     <input type="text" id="form34" class="form-control validate">
                     <label data-error="wrong" data-success="right" for="form34">Your name</label>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="text-center">
         <a href="" class="btn btn-default" data-toggle="modal" data-target="#modalContactForm2">Launch
         Modal Form 2</a>
      </div>
      <div class="modal fade" id="modalContactForm2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
         <div class="modal-dialog" role="document">
            <div class="modal-content">
               <div class="modal-header text-center">
                  <h4 class="modal-title w-100 font-weight-bold">Test of 2nd modal</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                  </button>
               </div>
              
              <p> This is a random test </p>
              
            </div>
         </div>
      </div>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script>
     (function(){
         // instead of using a global template variable,
         // use jQuery.data() to store it on the .modal element itself
         // so it works with multiple modals

         $('.modal').on('show.bs.modal', function (event) {
             if (!$(this).data('template')) {
                 $(this).data('template', $(this).html())
             } else {
                 $(this).html($(this).data('template'))
             }
             // other initialization here, if you want to
         })
     
     })()
  </script>

   </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.