newlookpopup

by sarathsprakash

HTML

<a id="hi"></a>

CSS

#overlay {
    position: fixed;
    background: rgba(0, 0, 0, .3);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100%;
    height:100%;
}
#popup {
    font-family: Helvetica"Helvetica Nueue" Arial;
    width:500px;
    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:30px auto 0;
    margin-left: -250px;
    margin-top: -40px;
}
#popup h3 {
    margin: 20px 0 0 0;
    padding: 0;
}
#popup p {
    margin: 15px;
    padding: 0;
}
#popup > #content, #popup > #title {
    word-wrap: break-word;
}
#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

(function () {
    $.fn.mypopup = function (options) {
        var settings = $.extend({
            'title': 'Hello',
                'content': 'You have no choice',
                'button': ['Confirm']

        }, 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++) {
                $('<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>';

        });
    }
})();

$(document).ready(function () {
    $("#hi").mypopup({'title':'hey'});
});