mynewpopup

by sarathsprakash

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

$.fn.mypopup = (function (options) {
    var settings = $.extend({
        title: 'Hello',
        content: '<p>hello how are you/p><img src="http://store.storeimages.cdn-apple.com/4662/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-space-gray-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520679826"/>',
        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>';

    });

})();