Скрыть Div онкликом снаружи - PullRequest
2 голосов
/ 23 апреля 2011

На моем веб-сайте есть div, который появляется, когда пользователь нажимает форму.Я использую обработчик события onclick для отображения div.Я хочу, чтобы div скрывался, когда пользователь щелкает где-то, кроме div.Я не могу использовать onblur ... потому что он не работает для divs.Может кто-нибудь предложить альтернативу?

Спасибо.

Вот как выглядит мой код: Javascript:

function hideDiv() {
    if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById('mydiv').style.visibility = 'hidden';
    }
    else {
        if (document.layers) { // Netscape 4 
            document.mydiv.visibility = 'hidden';
        }
        else { // IE 4 
            document.all.mydiv.style.visibility = 'hidden';
        }
    }
}

function showDiv() {
    if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById('mydiv').style.visibility = 'visible';
    }
    else {
        if (document.layers) { // Netscape 4 
            document.mydiv.visibility = 'visible';
        }
        else { // IE 4 
            document.all.mydiv.style.visibility = 'visible';
        }
    }
}

Ответы [ 2 ]

3 голосов
/ 02 мая 2012

Только что нашел простое решение, используя обработчик событий onmouseover / out.

Функция hideDiv () вызывается только в том случае, если переменная mouse_out имеет значение true.

var mouse_out;
mydiv.onmouseover = function(){ mouse_out = false }; // mouse is over div
mydiv.onmouseout = function(){ mouse_out = true }; // mouse outside
document.onclick = function(){
   if(mouse_out)
      hideDiv(),   // hides mydiv
      document.onclick = null; // disables next clicks on document
};

Она работает в любом протестированном браузере, а также в IE 5.
(IE4 и NS4 Iне знаю)

1 голос
/ 23 апреля 2011

То, как я обрабатывал подобные вещи в прошлом, это создание прозрачного слоя за div (используйте полностью прозрачное изображение BG), который имеет CSS где-то вроде:

div#overlay{
  position: fixed;
  width: 100%;
  height: 100%;
  background-image:url('transparent.gif');
  z-index: 1;
}

Этот div, конечно, только «видим», когда Div сверху виден.а затем присоедините обработчик события onclick, чтобы снова скрыть его.

Убедитесь, что у вашего "всплывающего div" есть z-индекс не менее 2.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...