JS, HTML & CSS Popup Menus

by Matthew Dewhurst

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="popup-box1-container">
    <div class="popup-box-wrapper">
        <div id="popup-box1">
            <h3>Popup box 1</h3>
            <p><a href="javascript:void(0)" onclick="toggle_visibility('popup-box1-container');">Close this popup box</a></p>
        </div><!-- popup-box1 end -->
    </div><!-- popup-box-wrapper -->
</div><!-- popup-box-container end -->

<div id="page-wrap">
    
    <div class="post">
        <p>Here is a div, it's a post</p>
        <p>Click <a href="javascript:void(0)" onclick="toggle_visibility('popup-box1-container');">here</a> to open the first popup box.</p>
    </div><!-- post end -->
    
    <div class="post">
        <p>Here is a div, it's a post</p>
        <p>Click <a href="javascript:void(0)" onclick="toggle_visibility('popup-box2');">here</a> to open the second popup box.</p>
    </div><!-- post end -->
    
    <div class="post">
        <p>Here is a div, it's a post</p>
        <p>Click <a href="javascript:void(0)" onclick="toggle_visibility('popup-box3');">here</a> to open the third popup box.</p>
    </div><!-- post end -->
    
</div><!-- page-wrap -->

CSS

body{ background-color: #EEE; }

.popup-box-wrapper{ width: 500px; margin: 40px auto; text-align: left; }

#popup-box1-container{ position: fixed; width: 100%; height: 120%; top: 0; left: 0; background-color: rgba(0,0,0,0.7); }
#popup-box1{ background-color: #FFF; padding: 20px; }

#page-wrap{ width: 1000px; margin: 40px auto; text-align: left; }

.post{ background-color: #FFF; padding: 20px; margin: 0 0 30px 0; }

JavaScript

<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->