Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: как убрать поп-ап окно при клике вне его

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
natariga
Отправлено: 18 Декабря, 2011 - 16:09:24
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
Добрый вечер!

Подскажите, плис, что надо добавить, чтоб этот попап окно закрывалось не только по ESC, но и по клику вне формы...

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).keydown(function(e){
  3. if ($("#contactForm").is(":visible") && (e.which == 27 || e.keyCode == 27)){
  4.         $('#contactForm').hide();
  5.         }
  6. });
  7.  


Спасибо заранее!

(Отредактировано автором: 18 Декабря, 2011 - 16:10:28)

 
 Top
tuareg
Отправлено: 18 Декабря, 2011 - 16:17:56
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
[url]
http://jquery[dot]page2page[dot]ru/index[dot][dot][dot]0%B0%D0%BC%D0%B8
[/url]
Там готовое решение
 
 Top
natariga
Отправлено: 18 Декабря, 2011 - 16:24:03
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
tuareg пишет:
[url]
http://jquery[dot]page2page[dot]ru/index[dot][dot][dot]0%B0%D0%BC%D0%B8
[/url]
Там готовое решение


а на какое событие? а то вся ссылка не сработала, чтоб там быстрее я б смогла найти
 
 Top
DlTA
Отправлено: 18 Декабря, 2011 - 16:32:40
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2952
Дата рег-ции: Окт. 2010  


Помог: 53 раз(а)
а если просто дописать блок?
CODE (javascript):
скопировать код в буфер обмена
  1. $(document).click(function(e){
  2. if ($("#contactForm").is(":visible")){
  3.         $('#contactForm').hide();
  4.         }
  5. });
 
 Top
tuareg
Отправлено: 18 Декабря, 2011 - 16:35:41
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
Да там движок не очень...
Рецепты---> Скрыть элемент при клике за его пределами
 
 Top
natariga
Отправлено: 18 Декабря, 2011 - 16:38:54
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
знаете какая штука случается...
у меня клик по пункту меню открыть поп-ап попадает в это условие.
Т.е. я кликаю по кнопке Войти, начинает открываться поп-ап окно, и этот же клик его закрывает...
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2.         $(".contact").click(function(){
  3.                 if ($("#contactForm").is(":hidden")){
  4.                         $("#contactForm").slideDown("slow");
  5.                 }
  6.                 else{
  7.                         $("#contactForm").slideUp("slow");
  8.                 }
  9.         });
  10.   $(document).click(function(event) {
  11.                 if ($("#contactForm").is(":visible")){
  12.                 alert('ups');
  13.             if ($(event.target).closest("#contactForm").length) return;
  14.                 $('#contactForm').hide();
  15.             event.stopPropagation();
  16.                 }
  17.   });
  18.  
  19.  

(Добавление)
DlTA пишет:
а если просто дописать блок?
CODE (javascript):
скопировать код в буфер обмена
  1. $(document).click(function(e){
  2. if ($("#contactForm").is(":visible")){
  3.         $('#contactForm').hide();
  4.         }
  5. });


у Вас закроет по любому клику, и даже по этому поп-ап окну, а надо только вне
 
 Top
tuareg
Отправлено: 18 Декабря, 2011 - 16:45:43
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
HTML выложите простенький не всей страницы, а именно окна плюс перекрывающий див
 
 Top
natariga
Отправлено: 18 Декабря, 2011 - 16:49:04
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div class="Login_Btn">
  3. <?
  4.         echo '<a class="contact" href="#contactFormContainer">'.$menu_top_enter.'</a>';
  5. ?>
  6. </div>
  7.  
  8. <div id="contactFormContainer">
  9.         <div id="contactForm" style="display:none">
  10.  
  11.  
  12.  
  13. <?
  14.                         echo '<form name="WinAutoriz" id="login_form"   method="post"  >';
  15. ?>
  16.                                 <p id="login_error"></p>
  17.                                 <div class="AutorizBoxForm">
  18.                                         <label class="textLabelA" for="name_user" >Имя пользователя:</label>
  19.                                         <input type="text" id="name_user" name="name_user" value="" size="33" />
  20.                                         <label class="textLabelA" for="email_user" >Пароль:</label>
  21.                                         <input id="pass_user" name="pass_user" type="password" value="" size="33" />
  22.                                         <label class="textLabelA" for="checkSave" >
  23.                                                 <input type="checkbox" id="saveMe" name="saveMe" checked />
  24.                                                 Запомнить меня
  25.                                         </label>
  26.                                 </div>
  27.  
  28.                                 <input type="hidden" name="okuser" id="okuser" value="" >
  29.  
  30.                                 <div class="ClosePopupForm">
  31.                                         <input type="hidden" name="send_user" value="yes">
  32.                                         <input type="hidden" name="visitor" value="<? echo $tvis; ?>">
  33.                                         <input type="button" class="buttonA orangeButton" name="btnAutorization" id="enterUser" value="Войти" />
  34.                                 </div>
  35.                         </form>
  36.  
  37.         </div>
  38. </div>
  39.  
  40.  
  41.  

(Отредактировано автором: 18 Декабря, 2011 - 16:51:28)

 
 Top
tuareg
Отправлено: 18 Декабря, 2011 - 17:04:59
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
Ну и ...
Вешайте
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $('#contactFormContainer').click(function(){
  3.        if ($(event.target).closest("#contactForm").length) return;
  4.        
  5. $('#contactForm').hide();
  6.       /*А можно еще изящней*/
  7.      $(".contact").click();
  8.        event.stopPropagation();
  9. });
  10.  
 
 Top
natariga
Отправлено: 18 Декабря, 2011 - 17:44:20
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
не, тоже не то, потому что при клике вне формы, форма закрывается и тут же опять открывается ( на $(".contact").click(); повешано событие открытия формы)
Вот как бы сделать так,
что при клике на любом месте, кроме этого дива $(".contact") при открытой форме поп-ап
вот такое условие
 
 Top
tuareg
Отправлено: 18 Декабря, 2011 - 17:59:38
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $('#contactFormContainer').click(function(){
  3.        if ($(event.target).closest("#contactForm").length) return;
  4.     $(".contact").click();
  5.        event.stopPropagation();
  6. });
  7.  

Вот так прямо попробуйте. Должно сработать.
 
 Top
natariga
Отправлено: 18 Декабря, 2011 - 18:20:58
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(".contact").click();
  3.  

открывает окно. а мне не надо этого.
т.е. клик вне формы закрывает его, все верно, но оно тут же открывается по вот этому событию
 
 Top
tuareg
Отправлено: 18 Декабря, 2011 - 18:27:40
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
natariga пишет:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(".contact").click();
  3.  


Все правильно. У Вас стоит проверка на видимость формы. Если она видима, скрываем или наоборот.
мой кусок кода делает следующее
Проверяет элемент на который кликнули
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. if ($(event.target).closest("#contactForm").length) return;
  3.  

Если кликнули не на $('#contactFormContainer'), он эмулирует событие click() на элементе $(".contact").(фактически закрытие модального окна)
Ну если не хочется так
сделайте
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $('#contactFormContainer').click(function(){
  3.        if ($(event.target).closest("#contactForm").length) return;
  4.    $('#contactForm').hide();
  5.        event.stopPropagation();
  6. });
  7.  
 
 Top
natariga
Отправлено: 18 Декабря, 2011 - 19:36:27
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
я поняла почему ерунда получается
надо объединить клики в одно событие, и в нем все проверять.
щас пытаюсь это сделать.
Т.е. история должна быть такая:
1. Обрабатываем событие клик по документу
2. Если форма закрыта и кликнули по $(".contact") - то открываем окно
3. Если форма открыта и кликнули в любом месте, кроме самой формы - то закрываем окно.
Вот как у меня получилось!
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2.         $(document).click(function(event){
  3.                 if ($("#contactForm").is(":hidden")){
  4.                         if ($(event.target).closest(".contact").length) {
  5.                                 $("#contactForm").slideDown("slow");
  6.                                 return;
  7.                         }
  8.                 } else {
  9.                         if ($(event.target).closest("#contactForm").length) return;
  10.                         $('#contactForm').slideUp("slow");
  11.                         event.stopPropagation();
  12.                 }
  13.         });
  14.  

Спасибо Вам за наводки мыслей!
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB