Форум

jk888 · #1 (**permalink**) 23.03.2014, 15:25

На странице есть много чего, и кнопка "вход". Если на нее нажать, выплывает форма для ввода пароля.

$('.vhod').click(function(){
        $('.vvod').fadeIn();
	});

Как сделать так, что бы эта форма пропадала, если кликнуть куда-либо кроме этой формы?

Так форма закрывается при любом клике:

$('html').click(function() {
		if ($('.vvod').css('opacity')=='1') {
			$('.vvod').fadeOut();
			}
	});

Фильтровать типа
$('html:not(".vvod")').click(function() {
что-то не получается.

jk888 · #2 (**permalink**) 23.03.2014, 15:57

Эх, извините, друзья.
Вечно так почему-то, не поймешь пока не спросишь, а спросишь, уже до ответа знаешь ответ. С детства такая фигня. Но мы не об этом.

Под форму создается абсолютный див на весь экран, и на него ставится событие по закрытию.

$('.fon').click(function() {
		if ($('.vvod').css('opacity')=='1') {
			$('.fon').fadeOut();
			$('.vvod').fadeOut();
			}
	});
	
	$('.vhod').click(function(){
                $('.fon').fadeIn();
                $('.vvod').fadeIn();
	});

Всем спасибо в любом случае.
~~Наверно еще обращусь, потому что ничерта все равно не понятно.~~

рони · #3 (**permalink**) 23.03.2014, 16:30

jk888,
сработает даже без фона

$(document).on('click', function (e) {
    if ($('form').has(e.target).length === 0){
        $('.fon').fadeOut();
        $('.vvod').fadeOut();
    }})

jk888 · #4 (**permalink**) 23.03.2014, 17:49

Спасибо огромное!
Знать бы еще что там такое.
Вообще синтаксис этот, функцие-образование, инопланетянщина какая-то оголтелая. Но я надеюсь на лучшее.

jk888 · #5 (**permalink**) 24.03.2014, 19:54

Извините, а не подскажете что за косяк если пытаться привязаться не просто к форме, а к форме с классом, или просто к классу?

if ($('form.vvod').has(e.target).length === 0){
if ($('.vvod').has(e.target).length === 0){
if ($('form').has('.vvod').length === 0){

Окно появляется и сразу пропадает.

Если с фоном из дива, то плевать конечно, ни на что кроме формы и фона нажать просто невозможно.
Но вот если без него, и где-то на экране есть еще форма(ы), то при нажатии на них окно появившейся формы не пропадает.

Если вы конечно скажете: "читай мануал, несчастный!", мне ничего не останется как покориться. Просто пока это приносит плоды так мееедленно.

рони · #6 (**permalink**) 24.03.2014, 20:07

jk888,
сделайте макет минимальный html

jk888 · #7 (**permalink**) 24.03.2014, 20:29

Вот http://jsfiddle.net/H7exX/
Но странно, там ваш пример почему-то не работает, а у меня дома работает.

рони · #8 (**permalink**) 24.03.2014, 20:38

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>

BETEPAH · #9 (**permalink**) 24.03.2014, 22:32

рони,

event.preventDefault();
event.stopPropagation();

это ведь return false, нет?

рони · #10 (**permalink**) 24.03.2014, 22:56

BETEPAH,
return false неотменяет всплытия
event.preventDefault(); отмена действия по умолчанию - переход по ссылке -js -> return false
event.stopPropagation(); отмена всплытия - js -> event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);

Форум

Справочник

Discord чат

Курсы javascript