Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Закрыть окно (https://javascript.ru/forum/jquery/10280-zakryt-okno.html)

Urfin 26.06.2010 03:13

Закрыть окно
 
Здравствуйте!
Подскажите пожалуйста как закрыть попап див, кликнув вне его.
Соответственно, если кликаем по нему самому, он закрываться не должен.
Я пытался так, но как отфильтровать клик по самому диву не понятно:
$(document).click(function(){
	$('#popup').fadeOut();	
})

sysya 26.06.2010 03:43

Такой вариантик если попробовать

if ($(this).attr('id') != 'popup') { $(this).fadeOut(); }

exec 26.06.2010 07:24

$(document).click(function(e){
var e = e || window.event, x = e.srcElement || e.target;
if (x != document.getElementById('popup')) $('#popup').fadeOut();
})

Urfin 27.06.2010 02:28

exec, спасибо, Ваш вариант работает, но только если всплывающий див пуст. А если он содержит еще элементы и я кликаю по внутреннему содержимому, он все равно закрывается. А хотелось бы, чтобы не закрывался.

Urfin 27.06.2010 04:30

Решил задачу следующим образом:
(Если у кого то есть более изящное решение, буду рад посмотреть!)
$(document).click(function(e){
	var e = e || window.event, x = e.srcElement || e.target;
	var arP = new Array();
	var p = $(x).parents();
	for(var i=0; i<p.length; i++){
		arP[i]=$(p[i]).attr('id');
	}
	arP[p.length]=$(x).attr('id');
	if (!inArray(arP, 'popup'))$('#popup').fadeOut();
});

function inArray(mas, element)
{
	for (var i = 0; i < mas.length; i++)
	{
	  if (mas[i] == element)
	  {
		return true;
	  }
	}
	return false;
}

sysya 27.06.2010 09:04

Может проверять елемент является ли он "popup" и спрашивать, нет ли у него родителя с id="popup"

exec 27.06.2010 09:08

Можно попробовать так:

$(document).click(function(e){
var e = e || window.event, x = e.srcElement || e.target;
if (x != document.getElementById('popup') || !$(x).parents('#popup').size()) $('#popup').fadeOut();
});

Urfin 27.06.2010 16:47

Цитата:

Сообщение от exec (Сообщение 61285)
Можно попробовать так:

$(document).click(function(e){
var e = e || window.event, x = e.srcElement || e.target;
if (x != document.getElementById('popup') || !$(x).parents('#popup').size()) $('#popup').fadeOut();
});

Да, действительно, более просто и изящно. Только нужно оператор "&&", а не "||".
if (x != document.getElementById('popup') && !$(x).parents('#popup').size()) $('#popup').fadeOut();

evguenyk 27.06.2010 20:52

Я решал задачу по другому.
При попапе дива - делал еще один блок с шириной и высотой 100%. на этот фоновый блок вешал событие, которое скрывает попап...

P.S. я сторонник идеи, чем меньше изворотов - тем стабильнее работает... наверное, вышеизложенные варианты красивее ;)

TicTac 17.05.2011 23:41

А как работает такая запись кода?

var e = e || window.event, x = e.srcElement || e.target;

как это элементы сравниваются через или а потом еще присваиваются?:blink:

poorking 17.05.2011 23:59

TicTac,
e || window.event - возвращается первый операнд, который после приведения к булевому типу === true

лучше так
var x = e ? e.target : window.event.srcElement

TicTac 18.05.2011 00:02

Можете еще подсказать, почему при открытии окна, выполняется закрытие popup'окна

показал окно подложку
$("#popup_bg").show();
$(".popup_wrap").show();

+ прибиндил событие
$(document).bind("click", close_popup);
но оно сразу выполняется будто я использую тригер ( , я ожидаю закрытие окна по клику на документ, и потом можно отбиндить наверно, что я не так делаю?

$('a[rel="popup-login"]').bind("click", function(){
            $("#popup_bg").show();
            $(".popup_wrap").show();

            $(document).bind("click", close_popup);

        })

        function close_popup(e){
            var e = e || window.event, x = e.srcElement || e.target;
            if (x != $('.popup_wrap') || !$(x).parents('.popup_wrap').size()){
                $('.popup_wrap').fadeOut();
            }
        }

TicTac 18.05.2011 00:11

Цитата:

Сообщение от poorking (Сообщение 105176)
TicTac,
e || window.event - возвращается первый операнд, который после приведения к булевому типу === true

лучше так
var x = e ? e.target : window.event.srcElement

вау, спасибо как просто :)

__Zem__ 18.07.2011 14:44

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

У меня был код который открывает но вместе с описанным в теме кодом он что то не так работает :) подскажите

вот что у меня было
function ololo(ololoN) {
    var form = "form"+ololoN;
    var ID = document.getElementById(form);
    if(ID.style.display === "none") {
        ID.style.display = "block";
    } else {
        ID.style.display = "none";
    }
	};
	
	$(document).click(function(e){
	var e = e || window.event, x = e.srcElement || e.target;
	if (x != document.getElementById('form1') && !$(x).parents('#form1').size()) 
	$('#form1').fadeOut();
	});


Часовой пояс GMT +3, время: 01:18.