Клик на все кроме
На странице есть много чего, и кнопка "вход". Если на нее нажать, выплывает форма для ввода пароля.
$('.vhod').click(function(){
$('.vvod').fadeIn();
});
Как сделать так, что бы эта форма пропадала, если кликнуть куда-либо кроме этой формы? Так форма закрывается при любом клике:
$('html').click(function() {
if ($('.vvod').css('opacity')=='1') {
$('.vvod').fadeOut();
}
});
Фильтровать типа $('html:not(".vvod")').click(function() { что-то не получается. |
Эх, извините, друзья.
Вечно так почему-то, не поймешь пока не спросишь, а спросишь, уже до ответа знаешь ответ. С детства такая фигня. Но мы не об этом. Под форму создается абсолютный див на весь экран, и на него ставится событие по закрытию.
$('.fon').click(function() {
if ($('.vvod').css('opacity')=='1') {
$('.fon').fadeOut();
$('.vvod').fadeOut();
}
});
$('.vhod').click(function(){
$('.fon').fadeIn();
$('.vvod').fadeIn();
});
Всем спасибо в любом случае. |
jk888,
сработает даже без фона :write:
$(document).on('click', function (e) {
if ($('form').has(e.target).length === 0){
$('.fon').fadeOut();
$('.vvod').fadeOut();
}})
|
Спасибо огромное!
Знать бы еще что там такое. Вообще синтаксис этот, функцие-образование, инопланетянщина какая-то оголтелая. Но я надеюсь на лучшее. |
Извините, а не подскажете что за косяк если пытаться привязаться не просто к форме, а к форме с классом, или просто к классу?
if ($('form.vvod').has(e.target).length === 0){
if ($('.vvod').has(e.target).length === 0){
if ($('form').has('.vvod').length === 0){
Окно появляется и сразу пропадает. Если с фоном из дива, то плевать конечно, ни на что кроме формы и фона нажать просто невозможно. Но вот если без него, и где-то на экране есть еще форма(ы), то при нажатии на них окно появившейся формы не пропадает. Если вы конечно скажете: "читай мануал, несчастный!", мне ничего не останется как покориться. Просто пока это приносит плоды так мееедленно. |
jk888,
сделайте макет минимальный html |
Вот http://jsfiddle.net/H7exX/
Но странно, там ваш пример почему-то не работает, а у меня дома работает. |
jk888,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.vvod {
display: none;
top:50px;
left:100px;
position: absolute;
}
.fon {
display: none;
position: absolute;
width: 100%; height: 100%;
top:0px;
background-color: #000;
opacity: 0.5;
}
body{
background-color: #E0FFFF;
margin: 0px;
padding: 0px;
}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script>
$(document).ready(function(){
$(document).on('click', function (event) {
if ($('.vvod').has(event.target).length === 0){
$('.fon').fadeOut();
$('.vvod').fadeOut();
}})
$('.vhod').click(function(event){
event.preventDefault();
event.stopPropagation();
$('.fon').fadeIn();
$('.vvod').fadeIn();
});
});
</script>
</head>
<body>
<a href='#' class='vhod'>Вход</a>
<div class='fon'></div>
<form action='' method='post' class='vvod'>
Логин<br>
<input type='text' name='log'><br>
Пароль<br>
<input type='text' name='pass'><br>
<br>
<input type='text' name='' value='Войти'><br>
</form>
</body>
</html>
|
рони,
event.preventDefault(); event.stopPropagation(); это ведь return false, нет? |
BETEPAH,
return false неотменяет всплытия event.preventDefault(); отмена действия по умолчанию - переход по ссылке -js -> return false event.stopPropagation(); отмена всплытия - js -> event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true); |
| Часовой пояс GMT +3, время: 01:18. |