newpopup

by sarathsprakash

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

$.fn.mypopup = (function (options) {
    var settings = $.extend({
        content: '',
        button: ['ok', 'hi']

    }, options);
    return $(this).each(function () {
        var main = $('<div id="main"></div>').appendTo('body');
        var overlay = $('<div id="overlay"></div>').appendTo(main);
        var popup = $('<div id="popup"> </div>').appendTo(main);
        var content = $('<div id="content"></div>').appendTo(popup);
        var count = settings.button.length;
        var buttonholder = "";
        if (count == 1 && count > 2) {
            buttonholder = $('<div class="button-holder one-more-button"></div>').appendTo(popup);
            
        }
        else if(count==2)
        {
             buttonholder = $('<div class="button-holder two-button"></div>').appendTo(popup);
        }
        
        for(var i=0;i<=count-1;i++)
        {
            console.log(settings.button[i]);
            $('<a href="#">'+settings.button[i]+'</a>').appendTo(buttonholder);
        }
    });

})();