Javascript Popup和Class代替ID

Question

我一直在使用一個簡單的腳本來彈出一個隱藏的div和一個絕對的hyperlink作爲用戶關閉彈出窗口的「故障安全」方式。現在我想在同一頁面上有多個「彈出窗口」，我需要進行調整，以便我不會通過ID進行定位。 getElementsbyClassName似乎沒有工作。

我現在HTML代碼：

<a href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='block';document.getElementById('fade').style.display='block'">Button One</a> 
<a href="javascript:void(0)" onclick="document.getElementById('buttonTwo').style.display='block';document.getElementById('fade').style.display='block'">Button Two</a> 

<div id="buttonOne" class="white_content"><a class="closeWindow" href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a> 
        <p>BUTTON ONE CONTENT</p> 
</div> 

<div id="buttonTwo" class="white_content"><a class="closeWindow" href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a> 
        <p>BUTTON TWO CONTENT</p> 
</div> 

<div id="fade" class="black_overlay"><a href="javascript:void(0)" onclick="document.getElementsByClassName('buttonOne').style.display='none';document.getElementById('fade').style.display='none'"></a></div> 

有些CSS：

.black_overlay{ 
    display: none; 
    position: fixed; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.8; 
    opacity:.80; 
    filter: alpha(opacity=80); 
} 

.black_overlay a { 
    display:block; 
    width:100%; 
    height:100%; 
    cursor:unset; 
} 

.white_content { 
    display: none; 
    position: fixed; 
    top: 12%; 
    left: 12%; 
    width: 75%; 
    height: 75%; 
    padding: 16px; 
    background-color: white; 
    z-index:1002; 
    overflow: auto; 
} 

所以彈出觸發器/按鈕做工精細，因爲我可以將每個按鈕連接到其各自的內容window具有唯一的ID。但底部的div（#fade）是窗口後面的內容，並用半透明覆蓋填充背景。我喜歡有一個巨大的鏈接，當你在內容窗口之外點擊時關閉窗口。由於它需要通過ID將當前打開的div容器作爲目標，所以我不知所措。

我試圖用document.getElementsbyClassName替換那裏的鏈接，並給所有窗口提供相同的類，但是我得到undefined錯誤。

任何幫助將不勝感激！

Answer 1

一個變化最小的解決方案是使用全局變量來跟蹤激活鍵，這樣的（全球爲activeButton，代碼的變化是爲a標籤和#fade標籤onclick屬性，並有一點點JavaScript的聲明變量）：

var activeButton;

.black_overlay{ 
 
    display: none; 
 
    position: fixed; 
 
    top: 0%; 
 
    left: 0%; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: black; 
 
    z-index:1001; 
 
    -moz-opacity: 0.8; 
 
    opacity:.80; 
 
    filter: alpha(opacity=80); 
 
} 
 

 
.black_overlay a { 
 
    display:block; 
 
    width:100%; 
 
    height:100%; 
 
    cursor:unset; 
 
} 
 

 
.white_content { 
 
    display: none; 
 
    position: fixed; 
 
    top: 12%; 
 
    left: 12%; 
 
    width: 75%; 
 
    height: 75%; 
 
    padding: 16px; 
 
    background-color: white; 
 
    z-index:1002; 
 
    overflow: auto; 
 
}

<a href="javascript:void(0)" onclick="activeButton = document.getElementById('buttonOne'); activeButton.style.display='block';document.getElementById('fade').style.display='block'">Button One</a> 
 
<a href="javascript:void(0)" onclick="activeButton = document.getElementById('buttonTwo'); activeButton.style.display='block';document.getElementById('fade').style.display='block'">Button Two</a> 
 

 
<div id="buttonOne" class="white_content"><a class="closeWindow" href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a> 
 
        <p>BUTTON ONE CONTENT</p> 
 
</div> 
 

 
<div id="buttonTwo" class="white_content"><a class="closeWindow" href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a> 
 
        <p>BUTTON TWO CONTENT</p> 
 
</div> 
 

 
<div id="fade" class="black_overlay"><a href="javascript:void(0)" onclick="if (activeButton) { activeButton.style.display='none';} activeButton = undefined;document.getElementById('fade').style.display='none'"></a></div>

我會強烈建議將所有這些JavaScript從onclick=...屬性中移出並放入函數中，但不僅僅是因爲它可以減少很多代碼重複。