mynewpopup

by sarathsprakash

CSS

#overlay {


    position: absolute;


    background: rgba(0, 0, 0, .3);


    top: 0;


    left: 0;


    right: 0;


    bottom: 0;


}


#popup {


    font-family: Helvetica"Helvetica Nueue" Arial;


    width:84%;


    z-index: 10px;


    background:rgba(255, 255, 255, 0.85);


    border-radius: 8px;


    text-align: center;


    box-sizing: border-box;


    position: absolute;


    top : 50%;


    left : 50%;


    margin : -100px 0 0 -250px;


}


#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({
        title: 'Hello',
        content: '<p>hello how are you</p>',
        button: ['ok', 'hi']

    }, options);
    return $(this).each(function () {
        var main = $('body');
        var overlay = $('<div id="overlay"></div>').appendTo(main);
        var popup = $('<div id="popup"> </div>').appendTo(main);
        var count = settings.button.length;
        var buttonholder = "";
        var title = $('<div id="title"></div>').appendTo(popup);
        var content = $('<div id="content"></div>').appendTo(popup);
        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);
            if (i == 1) $('<div style="clear: both"></div>').appendTo(buttonholder);
        }

        $(title)[0].innerHTML = '<h3>' + settings.title + '</h3>';
        $(content)[0].innerHTML = '<p>' + settings.content + '</p>';

    });

})();