Question

当有人点击按钮时，我会弹出一个弹出窗口。问题是我希望有6个按钮显示不同的内容，但使用相同的样式，这对我不起作用。这是我目前的代码（几天前我在另一篇文章中找到了它）：

CSS：

#overlay {
    display:none;    
    position:fixed;  
    left:0px;        
    top:0px;         
    width:100%;      
    height:100%;     
    background:#000; 
    opacity:0.5;     
    z-index:99999;   
}

#popup {
    display:none;
    position:fixed;
    left:50%;        
    top:50%;         
    width:300px;     
    height:150px;
    margin-top:-75px;
    margin-left:-150px;
    background:#FFFFFF;
    border:2px solid #000;
    z-index:100000;      
}

HTML：

<button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
    Popup contents here
    <button id="CloseBtn">ClosePopup</button>
</div>
<div>
    some other content that will be behind the popup
</div>

使用Javascript：

window.onload = function() {
  document.getElementById("LearnMoreBtn").onclick = function(){
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "block";
        popup.style.display = "block";
    };

  document.getElementById("CloseBtn").onclick = function(){
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "none";
        popup.style.display = "none";      
  }
};

Answer 1

我不知道我是否完全理解这个问题。 Here是我的JSFiddle，我相信你的要求。

以下是生成的HTML：

<button id="LearnMoreBtn">Learn More</button>
<button id="LearnMoreBtn2">Learn More2</button>
<div id="overlay"></div>
<div id="popup">
    Popup contents here
    <button id="CloseBtn">ClosePopup</button>
</div>
<div id="popup2">
    Popup2 contents here
    <button id="CloseBtn2">ClosePopup</button>
</div>
<div>
    some other content that will be behind the popup
</div>

同一页面上有多个弹出窗口？

1 个答案: