Thursday 25 October 2012

Full screen popup

You want to add popup in your site, it is very easy to implement popup in your site just use given code.

<div class="overlay" id="over-flow">   
</div>
<div class="main-box" id="compare-box">
    <span class="close-btn" onclick="boxClose()">Close</span>
</div>

Add CSS in your css file.
<style>
       .overlay{
             display:none;
              z-index:4;
             position:fixed;
             background:#000;
              opacity:0.8;
            left:0;
                top:0;
             right:0;
           bottom:0;
        }
     .main-box{
          display:none;
                left:10px; top:10px; right:10px; bottom:10px;
               background:#FDFFF4;
                  z-index:100;
                      color:#000;
                    position:absolute;
                     border:2px solid #ddd;
                 padding:5px;
    }
    .close-btn{
              padding:5px 10px 5px 10px;
                              border-radius:5px;
                         cursor:pointer;
                        background:#ccc;
                           float:right;
                     font-family:verdana;
                 font-size:12px;
      }
</style>

Add this script in your .js file.
<script>
        function boxClose(){
        $('#over-flow').hide();
        $('#compare-box').hide();
    }
    function get_compare(){
        $('#over-flow').show();
        $('#compare-box').show();
    }
</script>


Try this example:

 
Close

1 comment: