ОсновноеRadiotalkПользовательское
Программирование
6   •   Посмотреть все темы

Помогите сделать кнопку или ссылку закрытия модального окна...

 

53
artkhvz @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 });
});


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>


Разродил вот: <a href="#" onclick="$('#lean_overlay').fadeOut(200);">закрыть</a> но возникает проблема, контент остается а черный фон закрывается...

2970
удалён @Foggy
<a href="#" onclick="$('#lean_overlay, #test').fadeOut(200);">закрыть</a>
Это нужно?

53
artkhvz @artkhvz
Foggy пишет:

<a href="#" onclick="$('#lean_overlay, #test').fadeOut(200);">закрыть</a>
Это нужно?

да отлично! еще вот так можно: <a href="#" onclick="$('#lean_overlay').trigger('click'); return false;">закрыть</a>

53
artkhvz @artkhvz
подскажите.. а можно это окно заставить появляться не в заданном расстоянии от верха, а всегда в центре экрана????

3173
Николай @grom
У вас что-то подобное нельзя написать?
"top":50+"%",

53
artkhvz @artkhvz
grom пишет:

У вас что-то подобное нельзя написать?
"top":50+"%",

можно! спасибо за наводку)

"top":50+"%",
"margin-top":-(_6/2)+"px",

этих двух строк и не хватало