Wednesday 11 March 2015

simple pop up through css

<style type="text/css">
.blankdiv{background-color:#000;
position:fixed;
z-index: 9001;
top:0px; height:100%;
left:0px;
width:100%; opacity: 0.65;
filter:alpha(opacity=65);}


#popupform{height: 100%;
    left: 0;
    padding: 15px;
    position: fixed;
    top: 0;
    width:97%;
    z-index: 10001;
    }
  
#popupform .applyform{position:relative; overflow:auto;
background-color:#fff;
width:670px;
height:500px;  margin:5% auto auto auto;
z-index: 9002; padding:10px; border:10px solid #7F3814; }


#pclose{
    background-position: left top;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 25px;
    margin: 5% auto -6%;
    position: relative;
    right: -324px;
    top: 24px;
    width: 25px;
    z-index: 9999;}
</style>

  <a href="javascript:void(0)" id="apply" onclick="javascript:document.getElementById('popupform').style.display='block';return false;">Click Me</a>
 <div id="popupform" style="display:none">
  <div class="blankdiv"></div>
  <div id="pclose" onclick="javascript:document.getElementById('popupform').style.display='none';">close</div>
    <div class="applyform">
        <p id="contactArea">
        purushotam
        </p>
    </div>
 </div>

No comments:

Post a Comment