Multiple popup windows on same page?

Question

I have a popup window that pops up when someone click on a button. The problem is that I want to have 6 buttons that will display different content but use the same style which doesn't work for me. Here is my current code (I found it on another post a few days ago):

JSFiddle: http://jsfiddle.net/j4c7U/

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

score 0 · Accepted Answer · answered Jan 17 '14 at 16:26

0

I don't know if I completely understand the problem. Here is my JSFiddle with what I believe you're asking for.

Here is the resulting 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>

answered Jan 17 '14 at 16:26

apohl

1,913
27
30

You're welcome. I would also recommend simplifying the JavaScript by using a function that will open up any popup by passing in the popup's id. – apohl Jan 17 '14 at 16:34
I haven't worked with Javascript before so I have no idea what you mean, would you be able to create the simplified code and share it here if you have some free time please? – user3167464 Jan 17 '14 at 18:12

Multiple popup windows on same page?

1 Answers1