Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.01.2015, 12:24
Новичок на форуме
Отправить личное сообщение для QNester Посмотреть профиль Найти все сообщения от QNester
 
Регистрация: 17.01.2015
Сообщений: 6

Закрытие диалога при клике вне его
Добрый день, дорогие форумчане
Битый час сижу, и никак не могу понять, как реализовать мою задумку.
У меня на сайте есть несколько диалоговых окон
Всё реализовано так
HTML Код:

<div class="header">
</div>
<div class="wrapper">
   <div class="description">
      <button class="descr_but"></button>
      <div class="description_block" title="Описание 2">
          <p>Какой-то текст 2</p>
      </div>
   </div>
   <div class="description">
      <button class="descr_but"></button>
      <div class="description_block" title="Описание">
          <p>Какой-то текст</p>
      </div>
   </div>
</div>
<div class="footer">
</div>



Код JQ:
$(document).ready(function () {
    var dialogBox = $('.description_block').dialog({
        autoOpen: false,
        show: {
            effect: 'blind',
            duration: 1000
        },
        hide: {
            effect: 'fold',
            duration: 1000
        }
    });
    
    $('.descr_but').click(function () {
         dialogBox.eq($(this).index('.descr_but')).dialog('open');
});


Мне нужно, чтобы диалоговое окно ".description_block" закрывалось при нажатии на любую область вне его.
Я пробовал делать так:
$("body").not(".description").not(".descr_but").not(".description_block").click(function(){
   $(".description_block").dialog("close");
});


Но когда я нажимаю на кнопку ".descr_but" после появления диалоговое окно сразу же закрывается.
Помогите пожалуйста советом
Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2015, 12:41
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Опции такой не вижу. Примерный план - событие create, в нем навешивать обработчик на оверлей. Возможно придется смотреть код реализации.

Как грязный хак:
$('.ui-widget-overlay').click(function() {
    $(this).prev().dialog('close');
});
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2015, 13:05
Новичок на форуме
Отправить личное сообщение для QNester Посмотреть профиль Найти все сообщения от QNester
 
Регистрация: 17.01.2015
Сообщений: 6

Сообщение от danik.js Посмотреть сообщение
Опции такой не вижу. Примерный план - событие create, в нем навешивать обработчик на оверлей. Возможно придется смотреть код реализации.

Как грязный хак:
$('.ui-widget-overlay').click(function() {
    $(this).prev().dialog('close');
});

Прошу прощения за мою глупость, но я не понял совсем ничего)
Ответить с цитированием
  #4 (permalink)  
Старый 23.01.2015, 13:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

QNester,
modal: true и тогда
$("body").on("click",".ui-widget-overlay",function() {
      $(".description_block").dialog("close")
})


или так без параметра модальносьти
$(document).on("click", function (event) {
        if ($(".ui-dialog").has(event.target).length === 0) $(".description_block").dialog("close") ;
    });
Ответить с цитированием
  #5 (permalink)  
Старый 23.01.2015, 13:32
Новичок на форуме
Отправить личное сообщение для QNester Посмотреть профиль Найти все сообщения от QNester
 
Регистрация: 17.01.2015
Сообщений: 6

Сообщение от рони Посмотреть сообщение
QNester,
modal: true и тогда
$("body").on("click",".ui-widget-overlay",function() {
      $(".description_block").dialog("close")
})


или так без параметра модальносьти
$(document).on("click", function (event) {
        if ($(".ui-dialog").has(event.target).length === 0) $(".description_block").dialog("close") ;
    });
Спасибо большое! Второй раз меня спасаете
C модулем всё заработало, а без модуля почему так же: сначала открывается диалог, а потом сразу же закрывается
Ответить с цитированием
  #6 (permalink)  
Старый 23.01.2015, 13:57
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Залезу и я со своими 5 копейками - так можно и без модальности и с модальностью
$(document).click(function(e){
if(!$(e.target).closest('.ui-dialog').length) {
$(".description_block").dialog("close"); 
}
})

Последний раз редактировалось krasovsky, 23.01.2015 в 14:43.
Ответить с цитированием
  #7 (permalink)  
Старый 23.01.2015, 14:12
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

QNester, какой тогда смысл в не-модальности если работать будет все же как модальный?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #8 (permalink)  
Старый 24.01.2015, 13:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от QNester
а без модуля почему так же:
отмените всплытие в клике по кнопке открытия
$('.descr_but').click(function (*!*event*/!*) {
        *!* event.stopPropagation();*/!*
         dialogBox.eq($(this).index('.descr_but')).dialog('open');
});
Ответить с цитированием
  #9 (permalink)  
Старый 24.01.2015, 15:45
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Хотел было сделать нормально, по событию, через ссылку в виджете на оверлей. Посмотрел код реализации - и чета приуныл... Короче jquery ui - гавно. Оверлей создается при первом open(). В конце метода триггерится событие open, но параметр ui при этом - пустой объект, сцукко!
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
закрытие при клике в body Mizter Egoist Элементы интерфейса 19 12.03.2014 12:38
Закрытие прозрачного div при щелчке мыши в любой его области mav1 Элементы интерфейса 8 09.02.2011 19:25
закрыти diva при клике вне его Hugo_O Элементы интерфейса 14 21.05.2010 14:39
Закрыть элемент при клике вне его masterm Общие вопросы Javascript 3 31.07.2009 11:27