Custom popup with css and jQuery

How to make Custom popup with css and jQuery ?

To show popup we every time used jQuery( popup ) like : BJQS, FANCY BOX etc external libraries. sometime these libraries  are very much large or with many unwanted stuff.

so question comes, what to do at that time when we want simple 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: 30%;
     height: 30%;
     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.

Leave a Reply