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

时间：2019-02-22 19:53:00

标签： jquery css modal-dialog bootstrap-modal

我只是为一个很小的网站弄湿了。我对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>

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题