Javascript 关闭弹出窗口 div

Question

我有一个 div，我 hide/show 和 onclick 添加或删除 css class。当用户在 div 区域外单击时，我希望能够 close/hide div。

我该怎么做？

Answer 1

我认为 JavaScript 可以满足您的需求。它是一个名为 'onBlur' 的事件，当某些东西失去焦点时会触发事件处理程序（例如你的 div）。

您可以在此处阅读更多相关信息：http://www.w3schools.com/jsref/event_onblur.asp

基本上，当您的对象失去焦点时，您会调用 JavaScript 函数：

onBlur="myFunction();"

...和 'myFunction()' 将有 JavaScript 来更改您的 CSS。

Answer 2

正如这里提到的——

HTML

<div class="block">
      <div class="blockelements">

      </div>
    </div>

jQuery-

$(document).bind('click mouseup blur',function (e)
{
    var container = $(".block");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

演示- https://jsfiddle.net/up6g5rqL/1/

Javascript 关闭弹出窗口 div

Javascript close pop up div

javascript

dom-events