单击按钮错误后，用于显示文本和图像的HTML模型

我有一个按钮，单击该按钮模式后会显示在页面上，但这仅适用于单个按钮。我想创建多个按钮以及各自的按钮模式。现在，该代码正常工作，但可用于单个按钮。我只希望每个按钮显示不同的模式。怎么做？使用此代码？

        <!DOCTYPE html>
         <html>
         <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <style>
         body {font-family: Arial, Helvetica, sans-serif;}
         /* The Modal (background) */
         .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
        /* Modal Content */
        .modal-content {
         background-color: #fefefe;
         margin: auto;
         padding: 20px;
         border: 1px solid #888;
         width: 80%;
          }
         /* The Close Button */
        .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
         }
       .close:hover,
       .close:focus {
       color: #000;
       text-decoration: none;
       cursor: pointer;
        }
      </style>
      </head>
      <body>
         <h2>Modal Example</h2>
          <!-- Trigger/Open The Modal -->
          <button id="myBtn">Open Modal</button>
          <!-- The Modal -->
          <div id="myModal" class="modal">
           <!-- Modal content -->
           <div class="modal-content">
            <span class="close">&times;</span>
            <p>Some text in the Modal..</p>
            </div>
             </div>
             <script>
             // Get the modal
             var modal = document.getElementById('myModal');
             // Get the button that opens the modal
             var btn = document.getElementById("myBtn");
            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];
          // When the user clicks the button, open the modal 
            btn.onclick = function() {
            modal.style.display = "block";
             }
          // When the user clicks on <span> (x), close the modal
             span.onclick = function() {
             modal.style.display = "none";
           }
          // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) {
            if (event.target == modal) {
            modal.style.display = "none";
                }
              }
          </script>
       </body>
  </html>

我希望这会构想解决您的问题。添加新按钮并将模态ID传递到其模式属性中。。

       <!DOCTYPE html>
     <html>
     <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
     body {font-family: Arial, Helvetica, sans-serif;}
     /* The Modal (background) */
     .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    /* Modal Content */
    .modal-content {
     background-color: #fefefe;
     margin: auto;
     padding: 20px;
     border: 1px solid #888;
     width: 80%;
      }
     /* The Close Button */
    .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
     }
   .close:hover,
   .close:focus {
   color: #000;
   text-decoration: none;
   cursor: pointer;
    }
  </style>
  </head>
  <body>
     <h2>Modal Example</h2>
      <!-- Trigger/Open The Modal -->
      <button class='modal-bttn' modalId='myModal'>Open Modal</button>
    <button class='modal-bttn' modalId='myModal1'>Open Modal1</button>
      <!-- The Modal -->
      <div id="myModal" class="modal">
       <!-- Modal content -->
       <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
        </div>
         </div>
    <!-- The Modal1 -->
      <div id="myModal1" class="modal">
       <!-- Modal content -->
       <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Moda sdfsdfhl..</p>
        </div>
         </div>
         <script>
           var modal=null;
           [].forEach.call( document.querySelectorAll( '.modal-bttn' ), function ( bttn ) {
              bttn.addEventListener( 'click', function () {
                var modalId = bttn.getAttribute("modalId");
                showModal(modalId);
              }, false );
          });
           [].forEach.call( document.querySelectorAll( '.close' ), function ( bttn ) {
              bttn.addEventListener( 'click', function () {
                modal.style.display = "none";
              }, false );
          });
           function showModal(modalId){
             modal = document.getElementById(modalId);
             modal.style.display = "block";
             span = modal.children[0].children[0];
           }
      // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
        if (event.target == modal) {
        modal.style.display = "none";
            }
          }
      </script>
   </body>

//Add diff id for buttons   
<button id="myBtn-1">Open Modal 1</button>
<button id="myBtn-2">Open Modal 2</button>


//Add diff id for models
<div id="myModal-1" class="modal">
    //Code
</div>
<div id="myModal-2" class="modal">
    //Code
</div>

var modal1 = document.getElementById('myModal-1');
var modal2 = document.getElementById('myModal-2');

myBtn-1.onclick = function() {
  modal1.style.display = "block";
}
myBtn-2.onclick = function() {
  modal2.style.display = "block";
}

相关内容

最新更新

热门标签：