"pop up"
Bootstrap 3.1.0 Snippet by nitroale

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="row"> <div class="main-content">     <!-- Your Content Here -->     <p>Please <a class="show-popup" href="#">click here</a> to see the popup</p> </div>   <div class="overlay-bg">     <div class="overlay-content">         <p>Oh My! This is a popup!</p>         <button class="close-btn">Close</button>     </div> </div> </div> </div>
.main-content { height: 800px; width: 1000px; margin: 0 auto; } .overlay-bg { display: none; position: absolute; top: 0; left: 0; height:100%; width: 100%; cursor: pointer; z-index: 1000; /* high z-index */ background: #000; /* fallback */ background: rgba(0,0,0,0.75); } .overlay-content { background: #fff; padding: 1%; width: 40%; position: relative; top: 15%; left: 50%; margin: 0 0 0 -20%; /* add negative left margin for half the width to center the div */ cursor: default; border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,0.9); } .close-btn { cursor: pointer; border: 1px solid #333; padding: 2% 5%; background: #a9e7f9; /* fallback */ background: -moz-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e7f9), color-stop(4%,#77d3ef), color-stop(100%,#05abe0)); background: -webkit-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%); background: -o-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%); background: -ms-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%); background: linear-gradient(to bottom, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%); border-radius: 4px; box-shadow: 0 0 4px rgba(0,0,0,0.3); } .close-btn:hover { background: #05abe0; } /* media query for most mobile devices */ @media only screen and (min-width: 0px) and (max-width: 480px){ .overlay-content { width: 96%; margin: 0 2%; left: 0; } }
$(document).ready(function(){ // show popup when you click on the link $('.show-popup').click(function(event){ event.preventDefault(); // disable normal link function so that it doesn't refresh the page var docHeight = $(document).height(); //grab the height of the page var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling $('.overlay-bg').show().css({'height' : docHeight}); //display your popup and set height to the page height $('.overlay-content').css({'top': scrollTop+20+'px'}); //set the content 20px from the window top }); // hide popup when user clicks on close button $('.close-btn').click(function(){ $('.overlay-bg').hide(); // hide the overlay }); // hides the popup if user clicks anywhere outside the container $('.overlay-bg').click(function(){ $('.overlay-bg').hide(); }) // prevents the overlay from closing if user clicks inside the popup overlay $('.overlay-content').click(function(){ return false; }); });

Related: See More


Questions / Comments: