Jquery İle Basit Popup Yapımı (Leanmodal)  

Jquery ile yapılmış ve leanmodal olarak adlandırılan bu popup'ı uygulamalarımıza çok rahat bir şekilde entegre edebilir ve geliştirebiliriz.
Çok uzatmadan direkt kodları paylaşayım :)

HTML

EmreCeyhan.net | Popup'ı görüntülemek için tıklayın.


    
Jquery İle Basit Popup Yapımı (Leanmodal)

CSS

#lean_overlay {
position: fixed;
z-index: 10000;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}

#test {
width: 600px;
padding: 30px; 
display:none;
background: #FFF;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
       
}

JS

	(function($) {

    $.fn.extend({

        leanModal: function(options) {

            var defaults = {
                top: 100,
                overlay: 0.5
            }

            options = $.extend(defaults, options);

            return this.each(function() {

                var o = options;

                $(this).click(function(e) {

                    var overlay = $("
");

                    var modal_id = $(this).attr("href");

                    $("body").append(overlay);

                    $("#lean_overlay").click(function() {
                        close_modal(modal_id);
                    });

                    var modal_height = $(modal_id).outerHeight();
                    var modal_width = $(modal_id).outerWidth();

                    $('#lean_overlay').css({
                        'display': 'block',
                        opacity: 0
                    });

                    $('#lean_overlay').fadeTo(200, o.overlay);

                    $(modal_id).css({

                        'display': 'block',
                        'position': 'fixed',
                        'opacity': 0,
                        'z-index': 11000,
                        'left': 50 + '%',
                        'margin-left': -(modal_width / 2) + "px",
                        'top': o.top + "px"

                    });

                    $("").css({
                        'position': 'fixed',
                        'top': o.top +10+ 'px',
                        'left': '50%'
                    }).click(function() {
                        close_modal(modal_id);
                        // icon Url
                    }).attr('src', 'http://emreceyhan.net/upload/emreceyhan_55299912f3104.png').appendTo($(modal_id));

                    $(modal_id).fadeTo(200, 1);

                    e.preventDefault();

                });

            });

            function close_modal(modal_id) {

                $("#lean_overlay").fadeOut(200);

                $(modal_id).css({
                    'display': 'none'
                });

            }

        }
    });

})(jQuery);

$("a#go").leanModal();

Demoyu görüntülemek için buraya tıklayabilirsiniz.