.removeClass()

[Omega24v]

Ребята, помогите написать скрипт.

 

При нажатии на кнопку (div) , добавляется класс wp-tab-active и всплывает модальное окно. Мне надо его удалить, то есть когда я нажимаю вне формы, она закрывается.

 

http://shure-kryg.ru/testt - кнопка "Подробнее"

Edited August 13, 2014 by Omega24v

[Нарек]

поидее

$(window).load(function(){   $('body').click(function(){    $('.popup_element').removeClass('wp-tab-active');  });})

Но могу ошибаться)

заставили читать весь сайт пока ищу кнопку "подробнее" оказывается это "чудо" вот оно http://joxi.ru/FIrrU4wyTJDPAh4G0iE

Уж очень подробнее))

 

p.s. по ночам консоль с ошибками с косой не сниться?) 

Edited August 13, 2014 by Нарек

[ows.nightwolf]

Я бы так делал:

Дал модальному окну свои методы show() и hide(). В методе show() назначал бы обработчик клика по body и вызывал окно, а в методе hide() - удалял обработчик клика с body и скрывал окно. Кроме того т.к. клик по самому модальному окну так же сгенерирует событие в body, надо включить в тело обарботчика клика проверку на то по какому элементу произошел клик (чтоб по клику по самому модальному окну оно не закрывалось). Плюс назначения методов окну в том, что пока окно закрыто обработчик onclick не висит на body без надобносити. Кроме того, вы сможете так же добавить окну кнопку "закрыть" (что желательно, т.к. не всем интуитивно понятно что надо кликнуть за пределами окна чтобы его закрыть, обычно глаза ищут стандартный крестик виндоуз) и по клику на нее вызывать тот же метод hide() модального окна. В коде вашем я не копался, вот общий принцип работы моего варианта, подстроите под себя:

// Вспомогательная функция проверки на то, является ли элемент "а" вложенным в элемент "b"function isNested(a,  {  while ( a != b && a) {    a = a.parentNode;  }  return !!a;}// Выбираем модальные окна:var modal = $('.popup_element');// Для всех окон создаем методы:for (var i=0, len=modal.length; i<len; i++) {  // Метод show():  // [1] - Отображаем модальное окно.  // [2] - Вешаем обработчик onclick на body в котором будет проверка:  // [3] - Если элемент, сгенерировавший onclick, не является модальным окном,  //       его дочерним элементом или кнопкой, открывающей это окно:  // [4] - Скрыть модальное окно  modal[i].show = function (btn) {    $(this).addClass('show');                                   /*[1]*/    var self = this;    $('body').click(function(e){                                /*[2]*/      if ( !isNested( e.target, self) && e.target !== btn )     /*[3]*/        self.hide();                                            /*[4]*/    });  };  // метод hide():  // [1] - Скрываем модальное окно.  // [2] - Удаляем обработчик onclick у body.  modal[i].hide = function () {    $(this).removeClass( 'show' );                              /*[1]*/    $('body').click(function() {});                             /*[2]*/  };}// Для отображения окна вызываем везде где нужно метод show(). Ваш кэп.

Edited August 14, 2014 by ows.nightwolf

[Omega24v]

поидее

$(window).load(function(){   $('body').click(function(){    $('.popup_element').removeClass('wp-tab-active');  });})

Но могу ошибаться)

заставили читать весь сайт пока ищу кнопку "подробнее" оказывается это "чудо" вот оно http://joxi.ru/FIrrU4wyTJDPAh4G0iE

Уж очень подробнее))

 

p.s. по ночам консоль с ошибками с косой не сниться?) 

 

 

Сайт не мой, просто взялся править его, хотел было кинуть уже, так как кошмара хуже я ещё не видел, но решил добить его. 

[Omega24v]

Я бы так делал:

Дал модальному окну свои методы show() и hide(). В методе show() назначал бы обработчик клика по body и вызывал окно, а в методе hide() - удалял обработчик клика с body и скрывал окно. Кроме того т.к. клик по самому модальному окну так же сгенерирует событие в body, надо включить в тело обарботчика клика проверку на то по какому элементу произошел клик (чтоб по клику по самому модальному окну оно не закрывалось). Плюс назначения методов окну в том, что пока окно закрыто обработчик onclick не висит на body без надобносити. Кроме того, вы сможете так же добавить окну кнопку "закрыть" (что желательно, т.к. не всем интуитивно понятно что надо кликнуть за пределами окна чтобы его закрыть, обычно глаза ищут стандартный крестик виндоуз) и по клику на нее вызывать тот же метод hide() модального окна. В коде вашем я не копался, вот общий принцип работы моего варианта, подстроите под себя:

// Вспомогательная функция проверки на то, является ли элемент "а" вложенным в элемент "b"function isNested(a,  {  while ( a != b && a) {    a = a.parentNode;  }  return !!a;}// Выбираем модальное окно:var modal = $('.popup_element');// Метод show():// [1] - Отображаем модальное окно.// [2] - Вешаем обработчик onclick на body в котором будет проверка:// [3] - Если элемент, сгенерировавший onclick, не является модальным окном или его дочерним элементом:// [4] - Скрыть модальное окноmodal.show = funciton () {  this.addClass('wp-tab-active');         /*[1]*/  $('body').click(function(e){            /*[2]*/    if ( !isNested( e.target, modal) )    /*[3]*/      modal.hide();                       /*[4]*/  });};// метод hide():// [1] - Скрываем модальное окно.// [2] - Удаляем обработчик onclick у body.modal.hide = function () {  this.removeClass('wp-tab-active');      /*[1]*/  $('body').click(function() {});         /*[2]*/};// Для отображения окна вызываем везде где нужно метод modal.show(). Ваш кэп.

 

 

Спасибо вам за разжевывание всей структуры построения скрипта. 

Но вот хотелось бы уточнить пару нюансов: 

Расскажите мне более подробно о этом методе, что должно проверяться и что вложено 

    $('body').click(function(e){

        if ( !isNested( e.target, modal) )

        modal.hide();

        });

    };

 

    var modal = $('.clip_frame'); // Метод show():	modal.show = funciton () {		this.addClass('wp-tab-active');     			$('body').click(function(e){           		if ( !isNested( e.target, modal) )    		modal.hide();                          		});	}; // метод hide():			modal.hide = function () {			this.removeClass('wp-tab-active');   		$('body').click(function() {});         		};	});	

Edited August 14, 2014 by Omega24v

[ows.nightwolf]

Расскажите мне более подробно о этом методе, что должно проверяться и что вложено 

    $('body').click(function(e){

        if ( !isNested( e.target, modal) )

        modal.hide();

        });

    };

 

Это относится к теме всплытия событий. В кратце: "После того, как событие сработает на самом вложенном элементе, оно также сработает на родителях, вверх по цепочке вложенности". Когда мы вешаем обработчик click на body, все клики по любому элементу на странице (в том числе и по нашему модальному окну) будут вызывать обработчик этого события ( в частности: кликнули по модальному окну - событие "всплывает" вверх к родителю, к родителю родителя и т.д., доходит до body и у него выполняется ваш назначенный обработчик ). А т.к. в обработчике click у body у нас стоит директива "скрыть модальное окно", то получится что наше модальное окно будет скрываться по клику на него самого, что не есть хорошо. По этому перед выполнением скрытия нужно проверить на каком элементе был произведен клик. Если клик произведен по модальному окну, или его дочернему элементу - окно скрываться не должно.

 

P.S. К стати, вместо проверки на вложенность еще можно было повесить на модальное окно обработчик click с инструкцией прекращения всплытия.

P.P.S У меня там в самой функции isNested косяк был (вторая строка сверху), второй аргумент и скобка пропали, исправил.

Edited August 14, 2014 by ows.nightwolf

[Omega24v]

 

Расскажите мне более подробно о этом методе, что должно проверяться и что вложено 

    $('body').click(function(e){

        if ( !isNested( e.target, modal) )

        modal.hide();

        });

    };

 

Это относится к теме всплытия событий. В кратце: "После того, как событие сработает на самом вложенном элементе, оно также сработает на родителях, вверх по цепочке вложенности". Когда мы вешаем обработчик click на body, все клики по любому элементу на странице (в том числе и по нашему модальному окну) будут вызывать обработчик этого события ( в частности: кликнули по модальному окну - событие "всплывает" вверх к родителю, к родителю родителя и т.д., доходит до body и у него выполняется ваш назначенный обработчик ). А т.к. в обработчике click у body у нас стоит директива "скрыть модальное окно", то получится что наше модальное окно будет скрываться по клику на него самого, что не есть хорошо. По этому перед выполнением скрытия нужно проверить на каком элементе был произведен клик. Если клик произведен по модальному окну, или его дочернему элементу - окно скрываться не должно.

 

P.S. К стати, вместо проверки на вложенность еще можно было повесить на модальное окно обработчик click с инструкцией прекращения всплытия.

P.P.S У меня там в самой функции isNested косяк был (вторая строка сверху), второй аргумент и скобка пропали, исправил.

 

 

 Вот мне предоставили условно рабочий код, но тут нету проверки на id, можно к нему проверку прикрутить ??? А то он закрывает все модальные окна + кнопка "подробнее" не вызывается 

 

$(window).on('click', function( event ){if ( $( event.target ).closest( 'div.grpelem.wp-panel' ).length == 0 ){var element = $('div.grpelem.wp-panel:visible');if ( !$( event.target ).hasClass( '.popup_element' ) ){element.removeClass('wp-panel-active').hide();}if ( element.size() > 0 ){$( '.popup_element.wp-tab-active' ).removeClass( 'wp-tab-active PamphletThumbSelected' );}}}); 

Edited August 14, 2014 by Omega24v

[ows.nightwolf]

 Вот мне предоставили условно рабочий код, но тут нету проверки на id, можно к нему проверку прикрутить ??? А то он закрывает все модальные окна + кнопка "подробнее" не вызывается 

 

$(window).on('click', function( event ){if ( $( event.target ).closest( 'div.grpelem.wp-panel' ).length == 0 ){var element = $('div.grpelem.wp-panel:visible');if ( !$( event.target ).hasClass( '.popup_element' ) ){element.removeClass('wp-panel-active').hide();}if ( element.size() > 0 ){$( '.popup_element.wp-tab-active' ).removeClass( 'wp-tab-active PamphletThumbSelected' );}}}); 

 

 

Затрудняюсь ответить почему кнопка не вызывается, т.к. в предоставленом коде не вижу сходу ничего что могло бы нарушить ее функционал, тут только директивы для скрытия модальных окон. Но я не смотрел код и структуру вашего сайта (и не буду, не люблю я это дело), так что возможно я не до конца понимаю всех нюансов данного кода. А на счет проверки на id - что вы имеете в виду?

[Omega24v]

 

 Вот мне предоставили условно рабочий код, но тут нету проверки на id, можно к нему проверку прикрутить ??? А то он закрывает все модальные окна + кнопка "подробнее" не вызывается 

 

$(window).on('click', function( event ){if ( $( event.target ).closest( 'div.grpelem.wp-panel' ).length == 0 ){var element = $('div.grpelem.wp-panel:visible');if ( !$( event.target ).hasClass( '.popup_element' ) ){element.removeClass('wp-panel-active').hide();}if ( element.size() > 0 ){$( '.popup_element.wp-tab-active' ).removeClass( 'wp-tab-active PamphletThumbSelected' );}}}); 

 

 

Затрудняюсь ответить почему кнопка не вызывается, т.к. в предоставленом коде не вижу сходу ничего что могло бы нарушить ее функционал, тут только директивы для скрытия модальных окон. Но я не смотрел код и структуру вашего сайта (и не буду, не люблю я это дело), так что возможно я не до конца понимаю всех нюансов данного кода. А на счет проверки на id - что вы имеете в виду?

 

 

У каждой кнопки и модального окна id, по этому 2 раз кнопка не работает  и не работает 

[Omega24v]

Ребята, помогите ! Заплачу. Сроки поджимают.

[Нарек]

Ребята, помогите ! Заплачу. Сроки поджимают.

 

http://htmlforum.ru/index.php?showforum=54

 

Быстрее найдутся. А можно и прописать класс всем окнам того типа, и закрывать их по клику на body.

Edited August 14, 2014 by Нарек

[ows.nightwolf]

 

У каждой кнопки и модального окна id, по этому 2 раз кнопка не работает  и не работает 

 

 

всеравно я не понимаю как id может влиять на работоспособность кнопки) И вообще, что у вас за задача? Вам надо чтоб несколько окон одновременно можно было открывать? По клику на боди должны закрываться все сразу, или по одному?

[Omega24v]

 

 

У каждой кнопки и модального окна id, по этому 2 раз кнопка не работает  и не работает 

 

 

всеравно я не понимаю как id может влиять на работоспособность кнопки) И вообще, что у вас за задача? Вам надо чтоб несколько окон одновременно можно было открывать? По клику на боди должны закрываться все сразу, или по одному?

 

Открываться должно одно окно, закрываться должно то окно которое открылось... 

[ows.nightwolf]

Открываться должно одно окно, закрываться должно то окно которое открылось... 

 

В таком случае вам подойдет тот вариант что я скинул ранее. Только приношу свои извинения, первоначальный вариант не работал корректно в вашем случае, я внес исправления. Вот пример работы. Сделайте по аналогии, тут не сложно.