Friday, July 27, 2012

Create Simple popup in HTML, JavaScript


>> Simple Pop up HTML, JavaScript ::

    <style type="text/css">
    .black_overlay{
        display: none;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #000000;
        text-align:center;
        z-index:5000;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }
    .pop_me{
        background-color: #FFFFFF;
        height: 21px;
        position: absolute;
        right: 0;
        text-decoration: none;
        top: -21px;
        width: 50px;
    }
    .pop_alert{
    min-height:200px;
    }
    #popBox{ width:591px; position:fixed; height:auto; background:#FFF; display:none; z-index:50000; top:20%; left:30%; }
    </style>
    <div id="popX" class="black_overlay"></div>
    <div id="popBox"> <a class="pop_me" onClick="document.getElementById('popX').style.display='none'; document.getElementById('popBox').style.display='none';" href="javascript:;">Close [x]</a>
      <div class="pop_alert"> Your content here.... </div>
    </div>
    <button onClick="document.getElementById('popX').style.display='block'; document.getElementById('popBox').style.display='block';">Open Popup</button>

No comments:

Post a Comment