Javascript彈出框

我在我的網站上創建了一個彈出框。Javascript彈出框

我將彈出框添加到3個單獨的按鈕，出於某種原因，彈出窗口僅適用於第一個按鈕。

我刪除ID標籤：ID =「myBtn」的第一個按鈕，然後在彈出我的第二個按鈕的工作，但還是不會對我的第三個按鈕

工作，在彈出框，我還希望有一個鏈接將用戶指向聯繫表單，並且當用戶點擊鏈接時，彈出窗口應該關閉。

這裏是javascript代碼：

var modal = document.getElementById('myModal'); 

var btn = document.getElementById("myBtn"); 

var span = document.getElementsByClassName("close")[0]; 

btn.onclick = function() { 
    modal.style.display = "block"; 
} 

span.onclick = function() { 
    modal.style.display = "none"; 
} 

window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
}

下面是HTML代碼：

<footer class="panel-footer"><div class="btn btn-block btn-lg btn-default"><button id="myBtn">Sign up now</button> 
<div id="myModal" class="modal"> 
<div class="modal-content"> 
<div class="modal-header"> 
<span class="close">×</span> 
<h2><img src="http://localhost:8383/homepage/img/logo.png" style="width:250px"></h2> 
</div> 
<div class="modal-body"> 
<p>Please contact us via the <a href="#">contact form</a> as our sign up system is currently under construction</p> 
<p>Sorry for any inconvenience &nbsp; :) </p> 
</div> 
<div class="modal-footer"> 
<h3 align="center">SUPP Software LTD.</h3> 
</div> 
</div> 
</div> 
</div></footer>

來源

2016-06-28 Ashton

你必須對所有的按鈕相同的ID。 document.getElementById總是隻返回一個元素。 ID必須是唯一的。它更改爲類和綁定事件如果你給你所有的按鈕myBtn一個ID，然後它會更有意義，因爲你設置btn = document.getElementById('myBtn')這與找到的第一個元素未能在document.getElementsByClassName

來源

2016-06-28 15:35:07

謝謝大家，我有一個很難實現這是我新的JavaScript，如果有人可以幫助我，一點點 – Ashton

返回的每個元素編號爲myBtn。做Eduard所說的1.使用一個類，因爲元素不是唯一的，2.使用document.getElementsByClassName檢索所有元素而不是一個元素。

來源

2016-06-28 15:36:55 Jordan

實施例1：

與類名，

<html> 
 
    <head> 
 
     <title></title> 
 
    </head> 
 
    <body> 
 
     <button class="b">Button1</button> 
 
     <button class="b">Button2</button> 
 
     <button class="b">Button3</button> 
 
     <script> 
 
      var btn = document.getElementsByClassName("b")[0]; 
 
      btn.addEventListener("click",function(){ 
 
       alert("Button1"); 
 
      }) 
 
       var btn = document.getElementsByClassName("b")[1]; 
 
      btn.addEventListener("click",function(){ 
 
       alert("Button2"); 
 
      }) 
 
       var btn = document.getElementsByClassName("b")[2]; 
 
      btn.addEventListener("click",function(){ 
 
       alert("Button3"); 
 
      }) 
 
     </script> 
 
    </body> 
 
    </html>

實施例2：

與身份證，

<html> 
 
    <head> 
 
     <title></title> 
 
    </head> 
 
    <body> 
 
     <button id="btn1">Button1</button> 
 
     <button id="btn2">Button2</button> 
 
     <button id="btn3">Button3</button> 
 
     <script> 
 
      var btn = document.getElementById("btn1"); 
 
      btn.addEventListener("click",function(){ 
 
       alert("Button1"); 
 
      }) 
 
       var btn = document.getElementById("btn2"); 
 
      btn.addEventListener("click",function(){ 
 
       alert("Button2"); 
 
      }) 
 
       var btn = document.getElementById("btn3"); 
 
      btn.addEventListener("click",function(){ 
 
       alert("Button3"); 
 
      }) 
 
     </script> 
 
    </body> 
 
    </html>

來源

2016-06-28 15:49:14 Ehsan

Javascript彈出框

回答

相關問題