Форум

HawkOFF · #1 (**permalink**) 05.08.2011, 11:12

Помогите разобраться в следующей проблеме
У меня форма входа для пользователя всплывающая, необходимо чтобы при нажатии в любое место экрана, эта форма исчезала.
<body onclick="close_log()">
<span class="login" onclick="open_log ();">
<script>
function open_log()
{
document.getElementById('login_box').style.display ='block'
return false;
}
function close_log ()
{
document.getElementById('login_box').style.display ='none'
}
</script>
Данный код не работает изза всплывающего эфекта Dom, подскажите как сделать чтобы при первом клике форма сразу не закрывалась?

kostr · #2 (**permalink**) 05.08.2011, 16:28

В вызов добавьте onclick="open_log (event);"

а в функцию - остановку всплытия события:

function open_log(event) {
 document.getElementById('login_box').style.display ='block';
 if (event) {
  event.stopPropagation()
 } else {
  window.event.cancelBubble = true
 }
 return false;
}

HawkOFF · #3 (**permalink**) 05.08.2011, 21:45

Форма конечно сразу не закрывается, но появилась другая проблема) Когда я пытаюсь поставить курсор в input то форма закрывается
Такой код сейчас
function open_log(event) {
document.getElementById('login_box').style.display ='block';
if (event) {
event.stopPropagation()
} else {
window.event.cancelBubble = true
}
return false;
}
function close()
{
document.getElementById('login_box').style.display ='none';
}
<body onclick="close()">
<span class="login" onclick="open_log (event);">

kostr · #4 (**permalink**) 05.08.2011, 22:50

Ну допишите к этому 'login_box' функцию onclick, которая так же останавливает всплытие.

HawkOFF · #5 (**permalink**) 08.08.2011, 09:46

Дописал функцию к 'login_box' которая останавливает всплытие, но данная конструкция работает только в мозиле

А как сделать для всех браузеров? В javascript пока полный ноль просто

devote · #6 (**permalink**) 09.08.2011, 06:47

попробуй добавить отмену событий по умолчанию

function open_log( event ) {
    document.getElementById('login_box').style.display ='block';

    event = event || window.event;

    if (event.stopPropagation) event.stopPropagation();
    else event.cancelBubble = true;

    if (event.preventDefault) event.preventDefault();
    else event.returnValue = false;

    return false;
}

melky · #7 (**permalink**) 09.08.2011, 09:22

http://jsfiddle.net/fPEUP/2/

<style>
body {
    color: gray;
}
#a {
    color: red;
}
#login_box {
    border: 2px red dashed;
    color: black;
}
</style>

<body>
скройся!
  
<div id="a" class="login">появись!</div>
    
    <div id="login_box">скрывалка появлялка</div>
    
</body>

<script>
var b = document.getElementById("login_box");
document.body.onclick = function(a) {
  b.style.display = ~(a ? a.target : event.srcElement).className.indexOf("login") ? "block" : "none"
}
</script>

HawkOFF · #8 (**permalink**) 09.08.2011, 09:44

К сожалению изменений никаких

Работает только в мозиле

melky · #9 (**permalink**) 09.08.2011, 10:59

подточи скрипт...

kostr · #10 (**permalink**) 09.08.2011, 21:38

Вот так, по-моему, работает везде:

event = event || window.event;
event.cancelBubble = true

Форум

Справочник

Discord чат

Курсы javascript