Question

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

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

Answer 1

//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";
}

Answer 2

我希望这可以动态解决您的问题。只需添加新按钮并将模式ID传递到它的modalId属性中即可，剩下的工作就可以了。每个按钮都不需要任何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>

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

2 个答案: