jQuery - закрыть диалоговое окно, когда клик сделан за пределами

Question

Каждый раз, когда пользователь нажимает ссылку «Зарегистрироваться» или «Войти», появляется всплывающее окно. Но пользователь должен нажать кнопку «Вход» или зарегистрировать ссылку еще раз, если он хочет закрыть всплывающее окно. Можно ли закрыть всплывающее окно, если клик сделан на веб-странице?

Вот ссылка веб-страницу, чтобы увидеть живой код, если это помогает: http://bit.ly/1oagBgx

Это код выпадающее меню на веб-странице:

<!---dropdown---> 
<script type="text/javascript"> 
    //<![CDATA[ 
    function showlogin(){ 
     $("#loginbox").animate({"height": "toggle"}, { duration: 800 }); 
     $("#regsiterbox").hide(); 
     $(".login a").css("color", "#bf1e1a"); 
     $(".create-account a").css("color", "#747474"); 
    } 
    function showregister(){ 
     $("#regsiterbox").animate({"height": "toggle"}, { duration: 800 }); 
     $("#loginbox").hide(); 
     $(".create-account a").css("color", "#bf1e1a"); 
     $(".login a").css("color", "#747474"); 
    } 
    //]]> 
</script> 
<!---dropdown---> 

Любая помощь будет оценен по достоинству!

Answer 1

Используйте этот простой код

var clickNo = 2; 
    function yourFunction() 
     { 
     switch (clickNo) 
      { 
      case 1: 
       // Function : This will be onClick 
       // For ex : document.getElementById('id').className = "hiddenClass"; 
       clickNo = 2 
        return(false); 
      case 2: 
       // Function : This will be byDefault 
       // For ex : document.getElementById('id').className = "visibleClass"; 
       clickNo = 1 
        return(false); 
      } 
     } 

Во втором случае необходимо указать имя класса, в котором она видна

и в первом определить имя класса, в котором она скрыта

Answer 2

Пожалуйста, попробуйте это, я просто сделал пример для диалогового окна входа в систему, вы можете сделать то же самое для диалогового окна регистрации

$(document).click(function(e) { 
    if(e.target.id != 'loginbox') { 
    $("#loginbox").hide(); 
    } 
}); 

Answer 3

Вы можете использовать e.target.id, как в ответе Маулика, но это может не сработать, когда вы нажимаете на элемент вашего всплывающего окна, который нельзя делегировать в контейнер.

Вы в основном нужны две вещи:

1. Отследить мышь зависания в и из на вашем всплывающем диалоговом окне.
2. Связать обработчик события для события мыши над мышкой и проверить, находится ли курсор вне всплывающего окна. Если курсор находится вне всплывающего окна, закройте его.

Отслеживание мыши парение: Обратите внимание, что селектор [ID $ = «окно»], поэтому он соответствует все идентификаторы, которые заканчиваются на «поле». Убедитесь, что вы изменили это, как оно подходит для вашего приложения.

var insideMenu = false; 
$("[id$='box']").hover(
    function(){ 
     insideMenu = true; 
    }, 
    function(){ 
     insideMenu = false; 
    } 
); 

Связывание документа мышь вверх событие:

$(document).mouseup(function(){ 
    if(!insideMenu){ 
     $("#loginbox").hide(); 
     } 
});