vanbernaert/Jquery-Overlay-Popup-.markdown

## index.html
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>

  <body>
    <!--create a button with unique ID* -->
    <button id="btn-popup01" class="popup">popup button 1</button>
    <!-- create a span with the button#IDvalue as class value-->
    <span class="overlay_popup btn-popup01"><a href="#" onclick="$(this).popupClose();">close</a>
    <h3>your content title 1</h3>
      <p>your content 1</p>
    </span>

    <!--create a button with unique ID* -->
    <button id="btn-popup02" class="popup">popup button 2</button>
    <!-- create a span with the button#IDvalue as class value-->
    <span class="overlay_popup btn-popup02"><a href="#" onclick="$(this).popupClose();">close</a>
    <h3>your content title 2</h3>
      <p>your content 2</p>
    </span>

    <!--create a button with unique ID* -->
    <button id="btn-link01" class="link" formaction="http://s.emp.re/1KAZEXZ" formtarget="_blank">link button 3</button>

    <p>You could add the option to close the popup with an ESC-keystroke: <a href="http://codepen.io/ssstofff/pen/raQxrE" target="_blank">http://codepen.io/ssstofff/pen/raQxrE</a> </p>

    <p>A JS-less equivalent, but with much more CSS (LESS): <a href="http://codepen.io/maccadb7/pen/nbHEg" target="_blank">http://codepen.io/maccadb7/pen/nbHEg</a></p>

    <div class="loremipsum">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

  </body>
</html>

## Jquery-Overlay-Popup-.markdown

      
    Raw
  

              Jquery-Overlay-Popup-.markdown
            
          
    Jquery Overlay Popup

A Pen by Kristof Bernaert on CodePen.
License.

  
## script.js
// 2 button behaviours depending on its class
// 1 with class "popup" > provokes popup (+overlay)
// 1 with class "link" > provokes link
// the classes are important to not interfere for example with other <button> in your project, eg for forms.
// in action: http://kine.sarabernaert.be
// > 'maak afspraak': button.popup
// > 'ga naar aanmelden': button.link

$(document).ready(function(){
    $("body").on("click", "button.popup", function(){
      var btnId = $(this).attr('id');
      $( "body" ).addClass( "popup-open" ).fadeIn(2000);
      $( "."+ btnId ).addClass( "popup-open" ).fadeIn(400);
    }).on('click', 'button.link', function(){
      var btnFormAction = $(this).attr('formaction');
      var btnTarget = $(this).attr('formtarget');
      window.open(btnFormAction, btnTarget);
    });

// close/hide popup (+overlay)
    $.fn.popupClose = function() {
      $( "body" ).removeClass( "popup-open" )
      $( ".overlay_popup" ).removeClass("popup-open");
      return this;
    };
});


## style.css
button {
  padding: 10px;
  font-size: 1.5rem;
  background-color: #d5d5d5;
  border: 3px solid #ddd;
  margin: 15px;
  box-shadow: 0px 0px 15px #888888;
  cursor: pointer;
}

button:hover {
  box-shadow: 0px 0px 10px #888888;
}

body:after {
    content: "";
    display: none;
    position: fixed; /* could also be absolute */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
  background: rgba(0,0,0,0.6);
}

.overlay_popup {
  display: none;
  padding: 10px;
    width: 300px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    z-index: 11; /* 1px higher than the overlay layer */
}

body.popup-open:after, .popup-open {
  display: block;
  overflow: hidden; /*prevents bg content from scrolling when popup shown*/

}

.loremipsum {
  /*some fake text to test bg scroll blocking  by "overflow:hidden" when popup shown*/
  margin-top: 40px;
  font-size: 40px;
  color: rgba(0,0,0,0.2)
}
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	</head>

	<body>
	<!--create a button with unique ID* -->
	<button id="btn-popup01" class="popup">popup button 1</button>
	<!-- create a span with the button#IDvalue as class value-->
	<span class="overlay_popup btn-popup01"><a href="#" onclick="$(this).popupClose();">close</a>
	<h3>your content title 1</h3>
	<p>your content 1</p>
	</span>

	<!--create a button with unique ID* -->
	<button id="btn-popup02" class="popup">popup button 2</button>
	<!-- create a span with the button#IDvalue as class value-->
	<span class="overlay_popup btn-popup02"><a href="#" onclick="$(this).popupClose();">close</a>
	<h3>your content title 2</h3>
	<p>your content 2</p>
	</span>

	<!--create a button with unique ID* -->
	<button id="btn-link01" class="link" formaction="http://s.emp.re/1KAZEXZ" formtarget="_blank">link button 3</button>

	<p>You could add the option to close the popup with an ESC-keystroke: <a href="http://codepen.io/ssstofff/pen/raQxrE" target="_blank">http://codepen.io/ssstofff/pen/raQxrE</a> </p>

	<p>A JS-less equivalent, but with much more CSS (LESS): <a href="http://codepen.io/maccadb7/pen/nbHEg" target="_blank">http://codepen.io/maccadb7/pen/nbHEg</a></p>

	<div class="loremipsum">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

	</body>
	</html>
	// 2 button behaviours depending on its class
	// 1 with class "popup" > provokes popup (+overlay)
	// 1 with class "link" > provokes link
	// the classes are important to not interfere for example with other <button> in your project, eg for forms.
	// in action: http://kine.sarabernaert.be
	// > 'maak afspraak': button.popup
	// > 'ga naar aanmelden': button.link

	$(document).ready(function(){
	$("body").on("click", "button.popup", function(){
	var btnId = $(this).attr('id');
	$( "body" ).addClass( "popup-open" ).fadeIn(2000);
	$( "."+ btnId ).addClass( "popup-open" ).fadeIn(400);
	}).on('click', 'button.link', function(){
	var btnFormAction = $(this).attr('formaction');
	var btnTarget = $(this).attr('formtarget');
	window.open(btnFormAction, btnTarget);
	});

	// close/hide popup (+overlay)
	$.fn.popupClose = function() {
	$( "body" ).removeClass( "popup-open" )
	$( ".overlay_popup" ).removeClass("popup-open");
	return this;
	};
	});
	button {
	padding: 10px;
	font-size: 1.5rem;
	background-color: #d5d5d5;
	border: 3px solid #ddd;
	margin: 15px;
	box-shadow: 0px 0px 15px #888888;
	cursor: pointer;
	}

	button:hover {
	box-shadow: 0px 0px 10px #888888;
	}

	body:after {
	content: "";
	display: none;
	position: fixed; /* could also be absolute */
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	background: rgba(0,0,0,0.6);
	}

	.overlay_popup {
	display: none;
	padding: 10px;
	width: 300px;
	height: 200px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -150px;
	background-color: #fff;
	border-radius: 5px;
	text-align: center;
	z-index: 11; /* 1px higher than the overlay layer */
	}

	body.popup-open:after, .popup-open {
	display: block;
	overflow: hidden; /prevents bg content from scrolling when popup shown/

	}

	.loremipsum {
	/some fake text to test bg scroll blocking by "overflow:hidden" when popup shown/
	margin-top: 40px;
	font-size: 40px;
	color: rgba(0,0,0,0.2)
	}