Author: Deepak Gupta

Custom popup with css and jQuery

To show popup we every time used jQuery( popup ) like : BJQS, FANCY BOX etc. we always include that in our websites and used it but what if don’t want to include that file and make our own custom popup.

It’s really simple you just need to follow three Steps:-

  1. Include this html in our websites any where in footer, header or body
    <div id="custom-div-display" class="custom-content-css">
         <div id="contetn-with-css">
              <a href="#" id="hide-the-content">close</a>
              <h4>custom popup</h4>
              <p>here you can show you custom content</p>
         </div>
    </div>
    
  2. Copy this code and past as it in you j Query file( it will show popup on each time you refresh you screen )
    jQuery(document).ready(function($){
    
     jQuery("#custom-div-display").show();
    
     jQuery(document).keyup(function(e) {
           if (e.keyCode == 27) jQuery("#custom-div-display").hide();
     });
    
     jQuery("#hide-the-content").click(function(){
          jQuery("#custom-div-display").hide();
     }); 
    
    });
  3. Copy this css in to you style.css file:
    .custom-content-css {
     z-index: 999;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     display: none;
     position: fixed;
     background-color: rgba(0, 0, 0, 0.85);
     color: #aaaaaa;
     opacity: 30;
     filter: alpha(opacity = 50);
     }
     
    #contetn-with-css {
     width: 50%;
     height: 50%;
     position: absolute;
     color: #000000;
     background-color: #ffffff;
     /* To align popup window at the center of screen*/
     top: 40%;
     left: 50%;
     margin-top: -100px;
     margin-left: -220px;
     border-radius: 3px;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     padding: 80px;
     }

    And now every thing is done just go an refresh you websites it will show popup every time you reload you website.