[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: закрытия модального окна
artkhvz
Помогите сделать кнопку или ссылку закрытия модального окна...

ВОТ СКРИПТ
(function($){$.fn.extend({leanModal:function(_1){var _2={top:150,overlay:0.8};_1=$.extend(_2,_1);return this.each(function(){var o=_1;$(this).click(function(e){var _3=$("<div id='lean_overlay'></div>");var _4=$(this).attr("href");$("body").append(_3);$("#lean_overlay").click(function(){_5(_4);});var _6=$(_4).outerHeight();var _7=$(_4).outerWidth();$("#lean_overlay").css({"display":"block",opacity:0});$("#lean_overlay").fadeTo(200,o.overlay);$(_4).css({"display":"block","position":"fixed",opacity:0,"z-index":11000,"left":50+"%","margin-left":-(_7/2)+"px","top":o.top+"px"}); $(_4).fadeTo(200,1);e.preventDefault();});});function _5(_8){$("#lean_overlay").fadeOut(200);$(_8).css({"display":"none"});};}});})(jQuery);

ФУНКЦИЯ ЗАПУСКА
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 150 });
});
m4a1fox
Помести скрипт в bb теги и поставь правильно разметку. А то так, даже ни кто и не глянет - реально вырви глаз.
Hello
artkhvz, лови
<a href="#" onclick="$('#lean_overlay').fadeOut(200);">закрыть</a>


_____________
VPS от 5$, первые 2 месяца - бесплатно.
artkhvz
Цитата (artkhvz @ 29.10.2012 - 18:35)
Помогите сделать кнопку или ссылку закрытия модального окна...

ВОТ СКРИПТ
(function($){
    $.fn.extend({
        leanModal:function(_1){
            var _2={
                top:150,
                overlay:0.8
            };
           
            _1=$.extend(_2,_1);
            return this.each(function(){
                var o=_1;
                $(this).click(function(e){
                    var _3=$("<div id='lean_overlay'></div>");
                    var _4=$(this).attr("href");
                    $("body").append(_3);
                    $("#lean_overlay").click(function(){
                        _5(_4);
                    });
                    var _6=$(_4).outerHeight();
                    var _7=$(_4).outerWidth();
                    $("#lean_overlay").css({
                        "display":"block",
                        opacity:0
                    });
                    $("#lean_overlay").fadeTo(200,o.overlay);
                    $(_4).css({
                        "display":"block",
                        "position":"fixed",
                        opacity:0,
                        "z-index":11000,
                        "left":50+"%",
                        "margin-left":-(_7/2)+"px",
                        "top":o.top+"px"
                        });
                    $(_4).fadeTo(200,1);
                    e.preventDefault();
                });
            });
            function _5(_8){
                $("#lean_overlay").fadeOut(200);
                $(_8).css({
                    "display":"none"
                });
            };
    }
    });
})(jQuery);


ФУНКЦИЯ ЗАПУСКА
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 150 }); 
});


CSS

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

#test {
background: url(../assets/img/lay/bg.jpg);
padding: 23px 25px 23px 15px;
display:none;
border-radius: 5px 5px 5px 5px;       
}


HTML

<a rel="leanModal" name="test" href="#test">ссылка</a>
  <div id="test">
    <p>контент</p>             
  </div>

весь код
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.