newpopup

by sarathsprakash

HTML

<div id="main">
    <div id="overlay"></div>
    <div id="popup">
         <h3>Title</h3>

        <p>my popup works like this</p>
        <div class="button-holder one-button"> <a href="#">OK</a>

        </div>
        <div class="button-holder two-button"> <a href="#">BUTTON ONE</a>
 <a href="#">BUTTON TWO</a>

            <div style="clear: both"></div>
        </div>
        <div class="button-holder three-button"> <a href="#">BUTTON ONE</a>
 <a href="#">BUTTON TWO</a>
 <a href="#">BUTTON THREE</a>

        </div>
    </div>
</div>

CSS

body {
    font-family: Helvetica"Helvetica Nueue" Arial;
}
#main {
    margin: 0 auto;
    width: 640px;
    height: 1136px;
    background: white
    position: relative;
}
#overlay {
    position: absolute;
    background: black;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}
#popup {
    width:84%;
    z-index: 10px;
    background:rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    top : 50%;
    left : 50%;
    margin : -100px 0 0 -250px;
    text-align: center;
    box-sizing: border-box;
    position: absolute;
}
#popup h3 {
    margin: 20px 0 0 0;
    padding: 0;
}
#popup p {
    margin: 15px;
    padding: 0;
}
#popup .button-holder a {
    color: #007AFF;
    text-decoration: none;
    line-height:45px;
    font-weight:bold;
    display: block;
    border-top: 1px solid #BABABA;
}
#popup .two-button a {
    width: 50%;
    float: left;
    box-sizing: border-box
}
#popup .two-button a:first-child {
    border-right: 1px solid #BABABA
}

JavaScript

$(document).ready(function () {

});