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

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

javascript html

Javascript 单击按钮后显示文本和图像的html模型错误？,javascript,html,Javascript,Html,我有一个按钮，点击后，该按钮模式将出现在页面上，但这只是一个按钮的工作。我想创建多个按钮以及相应的按钮模式。现在代码运行良好，但它适用于单个按钮。我只想每个按钮显示不同的模态。怎么做？用这个密码 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1

我有一个按钮，点击后，该按钮模式将出现在页面上，但这只是一个按钮的工作。我想创建多个按钮以及相应的按钮模式。现在代码运行良好，但它适用于单个按钮。我只想每个按钮显示不同的模态。怎么做？用这个密码

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


正文{字体系列：Arial，Helvetica，无衬线；}
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：80%；
}
/*关闭按钮*/
.结束{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
模态示例
开放模态
&时代；
模态中的一些文本
//获取模态
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

//为按钮添加差异id
开放式模式1
开放式模式2
//为模型添加差异id
//代码
//代码
var modal1=document.getElementById（'myModal-1'）；
var modal2=document.getElementById（'myModal-2'）；
myBtn-1.onclick=function（）{
modal1.style.display=“块”；
}
myBtn-2.onclick=function（）{
modal2.style.display=“块”；
}

//为按钮添加差异id
开放式模式1
开放式模式2
//为模型添加差异id
//代码
//代码
var modal1=document.getElementById（'myModal-1'）；
var modal2=document.getElementById（'myModal-2'）；
myBtn-1.onclick=function（）{
modal1.style.display=“块”；
}
myBtn-2.onclick=function（）{
modal2.style.display=“块”；
}

我希望这将动态地解决您的问题。只需添加新按钮并将模式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>


正文{字体系列：Arial，Helvetica，无衬线；}
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：80%；
}
/*关闭按钮*/
.结束{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
模态示例
开放模态
开放模式1
&时代；
模态中的一些文本
&时代；
Moda sdfsdfhl中的一些文本
var-modal=null；
[].forEach.call（document.querySelectorAll（'.modal bttn'），function（bttn）{
bttn.addEventListener（'click'，函数（）{
var modalId=bttn.getAttribute（“modalId”）；
showModal（modalId）；
}，假）；
});
[].forEach.call（document.querySelectorAll（'.close'），函数（bttn）{
bttn.addEventListener（'click'，函数（）{
modal.style.display=“无”；
}，假）；
});
函数showModal（modalId）{
modal=document.getElementById（modalId）；
modal.style.display=“块”；
span=modal.children[0]。children[0]；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

我希望这将动态地解决您的问题。只需添加新按钮并将模式id传递到其modalId属性中。它将完成其余工作。您可以

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