<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <a href="#Popup" class="button">Expose Modal</a> <div id="Popup" class="Modal"> <div class="content"> <h2>Hey look at me being some content</h2> <p>We all know content needs a friendly sentence.</p> <a href="#" class="cancel">Cancel</a> <span class="close"></div> </div> </div> <script> $.fn.expose = function(options) { var $modal = $(this), $trigger = $("a[href=" + this.selector + "]"); $modal.on("expose:open", function() { $modal.addClass("is-visible"); $modal.trigger("expose:opened"); }); $modal.on("expose:close", function() { $modal.removeClass("is-visible"); $modal.trigger("expose:closed"); }); $trigger.on("click", function(e) { e.preventDefault(); $modal.trigger("expose:open"); }); $modal.add( $modal.find(".close") ).on("click", function(e) { e.preventDefault(); // if it isn't the background or close button, bail if( e.target !== this ) return; $modal.trigger("expose:close"); }); return; } $("#Popup").expose(); // Example Cancel Button $(".cancel").on("click", function(e) { e.preventDefault(); $(this).trigger("expose:close"); }); // Example Callbacks /* $("#Popup").on("expose:opened", function() { alert("Modal Opened!"); }); $("#Popup").on("expose:closed", function() { alert("Modal Closed!"); }); */ </script>

/***********************\ Modal Module - Title CSS FTW \***********************/ .Modal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; visibility: hidden; } .Modal .content { position: absolute; left: 50%; top: 30%; width: 50%; padding: 50px; border-radius: 3px; background: #fff; transform: translate(-50%, -30%) scale(0); } .Modal .close { position: absolute; top: 8px; right: 8px; display: block; width: 18px; height: 18px; padding: 5px; line-height: 18px; border-radius: 50%; text-align: center; cursor: pointer; background: #A38CDC; color: #fff; } .Modal .close:before { content: '\2715'; } .Modal.is-visible { visibility: visible; background: rgba(0, 0, 0, 0.5); transition: background .35s; transition-delay: .1s; } .Modal.is-visible .content { transform: translate(-50%, -30%) scale(1); transition: transform .35s; } /***********************\ Pen Specific Styles \***********************/ body { background: #FBFAF5; } .button { display: block; width: 150px; height: 45px; line-height: 45px; margin: 125px auto 0; border-radius: 3px; text-align: center; text-decoration: none; background: #A38CDC; color: #fff; }