Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <p> <a class="show-popup" href="#">Manual Therapy</a></p>
- <div class="overlay-bg">
- <div class="overlay-content">
- <h2>Manual Therapy</h2>
- <p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
- <button class="close-btn">Close</button>
- </div>
- </div>
- <a class="show-popup" href="#">LIST ITEM 2</a>
- <div class="overlay-bg">
- <div class="overlay-content">
- <h2>Low Level LASER Therapy</h2>
- <p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
- <button class="close-btn">Close</button>
- </div>
- </div>
- .overlay-bg {
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- height:100%;
- width: 100%;
- cursor: pointer;
- background: #000; /* fallback */
- background: rgba(0,0,0,0.75);
- }
- .overlay-content {
- background: #fff;
- padding: 1%;
- width: 700px;
- height: 400px;
- overflow:auto;
- position: relative;
- top: 15%;
- left: 30%;
- margin: 0 0 0 -10%; /* 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);
- }
- $(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
- $('.overlay-bg').show(); //display your popup
- });
- // 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;
- });
- });
- $('.overlay-bg').show();
- $(this).parent().next().show();
- .overlay-content {
- display:none; /* NOTE THIS */
- <a class="show-popup" href="#cont1">Manual Therapy</a>
- <a class="show-popup" href="#cont2">LIST ITEM 2</a>
- <div class="overlay-bg">
- <div id="cont1" class="overlay-content">
- <h2>Manual Therapy</h2>
- <p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
- <button class="close-btn">Close</button>
- </div>
- <div id="cont2" class="overlay-content">
- <h2>Low Level LASER Therapy</h2>
- <p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
- <button class="close-btn">Close</button>
- </div>
- </div>
- $(function(){
- $('.show-popup').click(function(event){
- event.preventDefault();
- $('.overlay-bg,'+ $(this).attr('href')).show(); // Show overlay, but also
- }); // the popup ID content
- // taken from the anchor HREF
- $('.overlay-bg, .close-btn').click(function(){
- $('.overlay-bg, .overlay-content').hide();
- });
- $('.overlay-content').click(function(event){
- event.stopPropagation();
- });
- });
- <a class="show-popup" href="#" id="1">Manual Therapy</a></p>
- <div class="overlay-bg" id="div_1">
- <div class="overlay-content">
- <h2>Manual Therapy</h2>
- <p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
- <button class="close-btn">Close</button>
- </div>
- </div>
- <a class="show-popup" href="#" id="2">LIST ITEM 2</a>
- <div class="overlay-bg" id="div_2">
- <div class="overlay-content">
- <h2>Low Level LASER Therapy</h2>
- <p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
- <button class="close-btn">Close</button>
- </div>
- </div>
- <script>
- $(document).ready(function(){
- // show popup when you click on the link
- $('.show-popup').click(function(event){
- var id = $(this).attr("id");
- event.preventDefault(); // disable normal link function so that it doesn't refresh the page
- $('#div_'+id).show(); //display your popup
- });
- // hide popup when user clicks on close button
- $('.close-btn').click(function(){
- var id = $(this).attr("id");
- $('#div_'+id).hide(); // hide the overlay
- });
- // hides the popup if user clicks anywhere outside the container
- $('.overlay-bg').click(function(){
- $(this).hide();
- })
- // prevents the overlay from closing if user clicks inside the popup overlay
- $('.overlay-content').click(function(){
- return false;
- });
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement