Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.04.2015, 10:23
Новичок на форуме
Отправить личное сообщение для Artem215 Посмотреть профиль Найти все сообщения от Artem215
 
Регистрация: 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);
Ответить с цитированием
  #2 (permalink)  
Старый 22.04.2015, 10:50
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 258

У вас в коде есть closeClass:"b-close". Может просто класс "b-close" нужно в css оформить, чтобы этот крестик виден стал.
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2015, 10:58
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 258

На демке этого плагина http://dinbror.dk/bpopup есть крестик для закрытия. Смотрите стили css, скорее всего косяк в них.
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2015, 12:58
Новичок на форуме
Отправить личное сообщение для Artem215 Посмотреть профиль Найти все сообщения от Artem215
 
Регистрация: 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 = "из";
    }
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2015, 12:59
Новичок на форуме
Отправить личное сообщение для Artem215 Посмотреть профиль Найти все сообщения от Artem215
 
Регистрация: 22.04.2015
Сообщений: 7

Я так понял нужно его как-то в первый код переместить, только вот я не знаю как
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2015, 13:09
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 258

Сообщение от Artem215 Посмотреть сообщение
Я так понял нужно его как-то в первый код переместить, только вот я не знаю как
Да тут не нужно в js код лезть. У вашей картинки(крестика) или у блока с этой картинкой скорее всего есть какой-нибудь класс, вот с ним и играйтесь. Тут нужно знание css, а не js.
Ответить с цитированием
  #7 (permalink)  
Старый 22.04.2015, 13:15
Новичок на форуме
Отправить личное сообщение для Artem215 Посмотреть профиль Найти все сообщения от Artem215
 
Регистрация: 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;
}
Ответить с цитированием
  #8 (permalink)  
Старый 22.04.2015, 14:08
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 258

Сообщение от 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;
}
Ну, наверное. Я бы открыл всплывающее окно, щёлкнул правой кнопкой по крестику и посмотрел код элемента, а потом в таблице стилей прописал(изменил) правила для него.
Ответить с цитированием
  #9 (permalink)  
Старый 22.04.2015, 15:21
Новичок на форуме
Отправить личное сообщение для Artem215 Посмотреть профиль Найти все сообщения от Artem215
 
Регистрация: 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;
}
Ответить с цитированием
  #10 (permalink)  
Старый 22.04.2015, 15:25
Новичок на форуме
Отправить личное сообщение для Artem215 Посмотреть профиль Найти все сообщения от Artem215
 
Регистрация: 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
}

я прописал код крестика но ничего..
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пример тестовых заданий на js junior elshaarawy Учебные материалы 3 26.03.2015 14:17
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 08:28
Как закрыть окно и вернуться на html-метку предыдущего? Kokaln Events/DOM/Window 6 21.04.2009 03:12
Как узнать свернуто окно браузера или нет. bar-boss Events/DOM/Window 3 25.09.2008 15:09