22.04.2015, 10:23
|
|
Новичок на форуме
|
|
Регистрация: 22.04.2015
Сообщений: 7
|
|
|
закрыть окно js
Есть кнопка на сайте, заказать обратный звонок, при открытии окна нужно добавить в верхнем правом углу крестик для закрытия, сейчас закрывается при нажатии вне блока, подскажите пожалуйста как это сделать.
/*================================================================================
* @name: bPopup - if you can't get it up, use bPopup
* @author: (c)Bjoern Klinggaard (twitter@bklinggaard)
* @demo: [url]http://dinbror.dk/bpopup[/url]
* @version: 0.9.3.min
================================================================================*/
(function(b){b.fn.bPopup=function(u,C){function v(){a.modal&&b('<div class="b-modal '+e+'"></div>').css({backgroundColor:a.modalColor,position:"fixed",top:0,right:0,bottom:0,left:0,opacity:0,zIndex:a.zIndex+l}).appendTo(a.appendTo).fadeTo(a.speed,a.opacity);z();c.data("bPopup",a).data("id",e).css({left:"slideIn"===a.transition?-1*(m+h):n(!(!a.follow[0]&&p||g)),position:a.positionStyle||"absolute",top:"slideDown"===a.transition?-1*(q+h):r(!(!a.follow[1]&&s||g)),"z-index":a.zIndex+l+1}).each(function(){a.appending&&b(this).appendTo(a.appendTo)});D(!0)}function t(){a.modal&&b(".b-modal."+c.data("id")).fadeTo(a.speed,0,function(){b(this).remove()});a.scrollBar||b("html").css("overflow","auto");b(".b-modal."+e).unbind("click");j.unbind("keydown."+e);d.unbind("."+e).data("bPopup",0<d.data("bPopup")-1?d.data("bPopup")-1:null);c.undelegate(".bClose, ."+a.closeClass,"click."+e,t).data("bPopup",null);D();return!1}function E(f){var b=f.width(),e=f.height(),d={};a.contentContainer.css({height:e,width:b});e>=c.height()&&(d.height=c.height());b>=c.width()&&(d.width=c.width());w=c.outerHeight(!0);h=c.outerWidth(!0);z();a.contentContainer.css({height:"auto",width:"auto"});d.left=n(!(!a.follow[0]&&p||g));d.top=r(!(!a.follow[1]&&s||g));c.animate(d,250,function(){f.show();x=A()})}function D(f){switch(a.transition){case "slideIn":c.css({display:"block",opacity:1}).animate({left:f?n(!(!a.follow[0]&&p||g)):j.scrollLeft()-(h||c.outerWidth(!0))-200},a.speed,a.easing,function(){B(f)});break;case "slideDown":c.css({display:"block",opacity:1}).animate({top:f?r(!(!a.follow[1]&&s||g)):j.scrollTop()-(w||c.outerHeight(!0))-200},a.speed,a.easing,function(){B(f)});break;default:c.stop().fadeTo(a.speed,f?1:0,function(){B(f)})}}function B(f){f?(d.data("bPopup",l),c.delegate(".bClose, ."+a.closeClass,"click."+e,t),a.modalClose&&b(".b-modal."+e).css("cursor","pointer").bind("click",t),!G&&(a.follow[0]||a.follow[1])&&d.bind("scroll."+e,function(){x&&c.dequeue().animate({left:a.follow[0]?n(!g):"auto",top:a.follow[1]?r(!g):"auto"},a.followSpeed,a.followEasing)}).bind("resize."+e,function(){if(x=A())clearTimeout(F),F=setTimeout(function(){z();c.dequeue().each(function(){g?b(this).css({left:m,top:q}):b(this).animate({left:a.follow[0]?n(!0):"auto",top:a.follow[1]?r(!0):"auto"},a.followSpeed,a.followEasing)})},50)}),a.escClose&&j.bind("keydown."+e,function(a){27==a.which&&t()}),k(C)):(c.hide(),k(a.onClose),a.loadUrl&&(a.contentContainer.empty(),c.css({height:"auto",width:"auto"})))}function n(a){return a?m+j.scrollLeft():m}function r(a){return a?q+j.scrollTop():q}function k(a){b.isFunction(a)&&a.call(c)}function z(){var b;s?b=a.position[1]:(b=((window.innerHeight||d.height())-c.outerHeight(!0))/2-a.amsl,b=b<y?y:b);q=b;m=p?a.position[0]:((window.innerWidth||d.width())-c.outerWidth(!0))/2;x=A()}function A(){return(window.innerHeight||d.height())>c.outerHeight(!0)+y&&(window.innerWidth||d.width())>c.outerWidth(!0)+y}b.isFunction(u)&&(C=u,u=null);var a=b.extend({},b.fn.bPopup.defaults,u);a.scrollBar||b("html").css("overflow","hidden");var c=this,j=b(document),d=b(window),G=/OS 6(_\d)+/i.test(navigator.userAgent),y=20,l=0,e,x,s,p,g,q,m,w,h,F;c.close=function(){a=this.data("bPopup");e="__b-popup"+d.data("bPopup")+"__";t()};return c.each(function(){if(!b(this).data("bPopup"))if(k(a.onOpen),l=(d.data("bPopup")||0)+1,e="__b-popup"+l+"__",s="auto"!==a.position[1],p="auto"!==a.position[0],g="fixed"===a.positionStyle,w=c.outerHeight(!0),h=c.outerWidth(!0),a.loadUrl)switch(a.contentContainer=b(a.contentContainer||c),a.content){case "iframe":var f=b('<iframe class="b-iframe" scrolling="no" frameborder="0"></iframe>');f.appendTo(a.contentContainer);w=c.outerHeight(!0);h=c.outerWidth(!0);v();f.attr("src",a.loadUrl);k(a.loadCallback);break;case "image":v();b("<img />").load(function(){k(a.loadCallback);E(b(this))}).attr("src",a.loadUrl).hide().appendTo(a.contentContainer);break;default:v(),b('<div class="b-ajax-wrapper"></div>').load(a.loadUrl,a.loadData,function(){k(a.loadCallback);E(b(this))}).hide().appendTo(a.contentContainer)}else v()})};b.fn.bPopup.defaults={amsl:50,appending:!0,appendTo:"body",closeClass:"b-close",content:"ajax",contentContainer:!1,easing:"swing",escClose:!0,follow:[!0,!0],followEasing:"swing",followSpeed:500,loadCallback:!1,loadData:!1,loadUrl:!1,modal:!0,modalClose:!0,modalColor:"#000",onClose:!1,onOpen:!1,opacity:0.7,position:["auto","auto"],positionStyle:"absolute",scrollBar:!0,speed:250,transition:"fadeIn",zIndex:9997}})(jQuery);
|
|
22.04.2015, 10:50
|
 |
Профессор
|
|
Регистрация: 16.07.2014
Сообщений: 267
|
|
|
У вас в коде есть closeClass:"b-close". Может просто класс "b-close" нужно в css оформить, чтобы этот крестик виден стал.
|
|
22.04.2015, 10:58
|
|
Профессор
|
|
Регистрация: 16.07.2014
Сообщений: 267
|
|
На демке этого плагина http://dinbror.dk/bpopup есть крестик для закрытия. Смотрите стили css, скорее всего косяк в них. |
|
22.04.2015, 12:58
|
|
Новичок на форуме
|
|
Регистрация: 22.04.2015
Сообщений: 7
|
|
Спасибо за Ваши ответы!
Добавил стиль bClose в css но ничего не изменилось, у меня при открытии фото на сайте есть крестик для закрытия, только он внизу окна, вот кусочек кода с иконкой крестика
LightboxOptions = (function() {
function LightboxOptions() {
this.fileLoadingImage = 'images/loading.gif';
this.fileCloseImage = 'images/close.png';
this.resizeDuration = 700;
this.fadeDuration = 500;
this.labelImage = "Изображение";
this.labelOf = "из";
}
|
|
22.04.2015, 12:59
|
|
Новичок на форуме
|
|
Регистрация: 22.04.2015
Сообщений: 7
|
|
|
Я так понял нужно его как-то в первый код переместить, только вот я не знаю как
|
|
22.04.2015, 13:09
|
|
Профессор
|
|
Регистрация: 16.07.2014
Сообщений: 267
|
|
Сообщение от Artem215
|
|
Я так понял нужно его как-то в первый код переместить, только вот я не знаю как
|
Да тут не нужно в js код лезть. У вашей картинки(крестика) или у блока с этой картинкой скорее всего есть какой-нибудь класс, вот с ним и играйтесь. Тут нужно знание css, а не js. |
|
22.04.2015, 13:15
|
|
Новичок на форуме
|
|
Регистрация: 22.04.2015
Сообщений: 7
|
|
То есть мне в css сделать примерно так?
.bClose{
width: 606px;
height: 480px;
padding: 20px 20px 20px 20px;
font: 18px PFDinTextCondPro;
line-height: 26px;
position: relative;
background: url('../images/close.png') repeat-x 0 -20px;
}
|
|
22.04.2015, 14:08
|
|
Профессор
|
|
Регистрация: 16.07.2014
Сообщений: 267
|
|
|
Сообщение от Artem215
|
То есть мне в css сделать примерно так?
.bClose{
width: 606px;
height: 480px;
padding: 20px 20px 20px 20px;
font: 18px PFDinTextCondPro;
line-height: 26px;
position: relative;
background: url('../images/close.png') repeat-x 0 -20px;
}
|
Ну, наверное. Я бы открыл всплывающее окно, щёлкнул правой кнопкой по крестику и посмотрел код элемента, а потом в таблице стилей прописал(изменил) правила для него. |
|
22.04.2015, 15:21
|
|
Новичок на форуме
|
|
Регистрация: 22.04.2015
Сообщений: 7
|
|
Спасибо я вроде немного разобрался)
Смотрите, вот код скрипта в html
<script type="text/javascript">
$(function(){
$('.close').click(function(){
$('.popup_modal').bPopup().close();
});
});
$(function(){
$('#py_1').click(function(){
$('#py_1_modal').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 650,
transition: 'slideDown'
});
});
$('#py_2').click(function(){
$('#py_2_modal').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 650,
transition: 'slideDown'
});
});
$('#py_2').click(function(){
$('#py_2_modal').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 650,
transition: 'slideDown'
});
});
$('#py_3').click(function(){
$('#py_3_modal').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 650,
transition: 'slideDown'
});
});
$('#cro_1').click(function(){
$('#cro_1_modal').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 650,
transition: 'slideDown'
});
});
$('#cro_2').click(function(){
$('#cro_2_modal').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 650,
transition: 'slideDown'
});
});
$('#cro_3').click(function(){
$('#cro_3_modal').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 650,
transition: 'slideDown'
});
});
$('#skat_1').click(function(){
$('#skat_1_modal').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 650,
transition: 'slideDown'
});
});
$('#skat_2').click(function(){
$('#skat_2_modal').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 650,
transition: 'slideDown'
});
});
$('#skat_3').click(function(){
$('#skat_3_modal').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 650,
transition: 'slideDown'
});
});
$('#snake_1').click(function(){
$('#snake_1_modal').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 650,
transition: 'slideDown'
});
});
$('#snake_2').click(function(){
$('#snake_2_modal').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 650,
transition: 'slideDown'
});
});
$('#snake_3').click(function(){
$('#snake_3_modal').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 650,
transition: 'slideDown'
});
});
$('.show_modal').click(function(){
$('#form_modals').bPopup({
speed: 650,
transition: 'slideIn'
});
});
$('.go_see_more').click(function(){
$('#form_modals_see_more').bPopup({
speed: 650,
transition: 'slideIn'
});
});
});
</script>
, а вот стиль который отвечает за закрытие
.popup_modal{
display: none; width: 400px; height: 300px; background: #fff;
border: 4px solid rgba(0,0,0,0.5); border-radius: 10px;
position: relative;
}
.popup_modal .close{
position: absolute;
top: 4px;
right: 4px;
font: 14px sans-serif;
background: rgba(0, 0, 0, 0.5);
display: block;
width: 16px;
height: 16px;
text-align: center;
line-height: 15px;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.popup_modal.more_modal{
width: 606px;
height: 480px;
padding: 20px 20px 20px 20px;
font: 18px PFDinTextCondPro;
line-height: 26px;
position: relative;
background: url('../images/action/back.png') repeat-x 0 -20px;
}
|
|
22.04.2015, 15:25
|
|
Новичок на форуме
|
|
Регистрация: 22.04.2015
Сообщений: 7
|
|
При удалении только одного кода, окно хоть как то изменяется (рамка исчезает)
1
.popup_modal{
02
display: none; width: 400px; height: 300px; background: #fff;
03
border: 4px solid rgba(0,0,0,0.5); border-radius: 10px;
04
position: relative;
05
}
я прописал код крестика но ничего.. |
|
|
|
