Creating HTML, CSS & JS popup boxes

Creating some simple, quick HTML & CSS based popup boxes with a few lines of JS code. Unfortunately, the preview doesn't seem to be working JSFiddle but is should work else where.

HTML

<div id="popup-box1" class="popup-position">
    	<div id="popup-wrapper">
        	<p style="text-align: right;"><a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">X</a></p>
        	<div id="popup-container">
            	<h3>Popup box 1</h3>
                <p>Congratulations, you've opened popup box 1</p>
            </div><!-- Popup container end -->
            <p style="text-align: right;"><a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">Close popup box</a></p>
        </div><!-- Popup wrapper popup end -->
    </div><!-- Popup box 1 end -->

	<div id="popup-box2" class="popup-position">
    	<div id="popup-wrapper">
        	<div id="popup-container">
            	<h3>Popup box 2</h3>
                <p>Congratulations, you've opened popup box 2</p>
                <p><a href="javascript:void(0)" onclick="toggle_visibility('popup-box2');">Close popup box</a></p>
            </div><!-- Popup container end -->
        </div><!-- Popup wrapper popup end -->
    </div><!-- Popup box 1 end -->

	<div id="popup-box3" class="popup-position">
    	<div id="popup-wrapper">
        	<div id="popup-container">
            	<h3>Popup box 3</h3>
                <p>Congratulations, you've opened popup box 3</p>
                <p><a href="javascript:void(0)" onclick="toggle_visibility('popup-box3');">Close popup box</a></p>
            </div><!-- Popup container end -->
        </div><!-- Popup wrapper popup end -->
    </div><!-- Popup box 1 end -->
HTML

1

<div id="popup-box1" class="popup-position">

2

      <div id="popup-wrapper">

3

          <p style="text-align: right;"><a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">X</a></p>

4

          <div id="popup-container">

5

              <h3>Popup box 1</h3>

6

                <p>Congratulations, you've opened popup box 1</p>

7

            </div><!-- Popup container end -->

8

            <p style="text-align: right;"><a...

CSS

body{ overflow-y: scroll; padding: 0; margin: 0; font-family: Roboto; font-size: 16px; color: #555; height: 2000px; }

.popup-position{ display: none; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.7); width: 100%; height: 100%; }
#popup-wrapper{ width: 500px; margin: 70px auto; text-align: left; }
#popup-container{ background-color: #FFF; padding: 20px; border-radius: 4px; }

#wrapper{ width: 600px; margin: 40px auto; text-align: left; }

JavaScript

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