当用户点击页面时如何隐藏一个div

Question

我正在使用这段代码：

function check_remember(event) {
 if (document.getElementById('rem_email').value == "") {
        alert("Harap isi email !");
    } else {
        document.getElementById('popup_remember').style.display = "none";
        event.preventDefault();
    }

};

function remember_show() {
    document.getElementById('popup_remember').style.display = "block";
};

而这是我的HTML代码：

<button type="button" class="btn-custom remember" onclick="remember_show()">Ingatkan Saya</button>

<!-- PopUp -->
<div id="popup_remember">
  <div id="REM">
    <form id="form_remember">
      <input id="rem_email" name="email" placeholder="Input Email" type="text" class="form-control" required>
        <input type="submit" id="sub_rem" value="Agree" onclick="check_remember(event)">
     </form>
  </div>
</div>

问题是，我不知道如何在单击页面主体时隐藏模态窗口。

- Afrgun

Answer 1

我认为这是您要寻找的内容：

演示效果：DEMO

更新后的演示效果：UPDATED DEMO

HTML

请注意，此处保留了HTML标签。

<h1> Just Random Header </h1>

<div class="div1"> Hello i am div :) <br /> <br />If you click anywhere then me i will disappear !</div> 

CSS

.div1
{
    width:310px;
    height:100px;
    background:#ddd;
}

JS

$(document).mouseup(function (e)
{
    var container = $(".div1");

    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();
    }
}); 

- divy3993

---

谢谢回复，我认为导致这一切的是我的CSS不起作用。这是我显示它时的弹出窗口这是我的CSS jsFiddle，请纠正我。 - Afrgun

解决了！在这里查看演示DEMO。如果还有任何问题，请随时提问。 - divy3993

Answer 2

首先获取被点击的目标。然后检查点击事件是否在弹出层div之外，并且是否已经隐藏。类似这样的代码应该可以实现：

$(function(){
    $('body').on('click', function(){
        var $this = $(arguments[0].target);
        var $target = $('#popup_remember');
        if( !$this.parents('#popup_remember').length && $this.attr('id') != "REM" && $target.is(':visible') ) $target.hide();
    });
});

Check jsFiddle

- kosmos

---

谢谢回复，但是在CSS中我将#popup_remember设置为宽度100％，当我点击div#REM之外时它不起作用。我认为这是因为我将#popup_remember设置为宽度100％和z-index 9999。请纠正我 :) - Afrgun

它应该无论如何都能工作（如果您点击弹出的div），但是我在代码中有一个错误。我已经进行了编辑。 - kosmos

如果我将#popup_remember的宽度和高度设置为50％，那么它会正常工作。[这是我的CSS jsFiddle]（http://jsfiddle.net/rmtek3a9/3/），因为我在#popup_remember之外单击。但是，如果您有其他方法来修改我的CSS，请指正我。 - Afrgun

我明白发生了什么，你只是想要一个模态背景。我更新了我的答案和示例，现在它按预期工作了。由于你使用了一个模态框，我们必须处理它的包装 div #REM。 - kosmos

哦，太好了，你是我的英雄。我已经浪费了3个小时在这个问题上。看了其他论坛，但都不起作用。最后我在这里问了一下，终于解决了。谢谢@kmsdev。 - Afrgun

我很高兴。无论如何，您可以采用更多方法来改进它，例如使用一些CSS。例如，您可以有两个兄弟div，第一个是背景模态框，第二个是包装器。因此，单击包装器永远不会处理模态框，反之亦然。:) - kosmos

Answer 3

你可以尝试使用jQuery而不仅仅是Javascript。

$(document).ready(function(){
    $('body').on('click', function(){
        if($('#rem_email').val() === ''){
            alert('Harap isi email !');
        } else {
            $('#popup_remember').hide()
        }
    }
    //Let's add your remember_show function too! It's also an OnClick (As seen in the HTML).
    $('btn-custom remember').on('click',function(){
        $('popup_remember').show();
    });
});

这是您的JavaScript代码转换为jQuery代码。 :)

除了使用hide()和show()之外，您还可以使用fadeOut()和fadeIn()来动画化您要隐藏和显示的对象的不透明度。

- Rizky Fakkel

---

在使用jQuery之前使用Vanilla JS并没有什么不好的！老实说，我建议在开始学习或使用任何框架之前先使用纯JS。 - Glorifind

我知道！这正是我开始学习js/jQuery时所做的，因此在学习目的上我非常赞同。我的第一句话中也有“尝试”关键字哈哈。我现在只是觉得jQuery简短易读，非常适合我的需求。 - Rizky Fakkel

Answer 4

如果你想制作自定义模态框，这可能会对你有所帮助。但这仅适用于模态效果，以及你在点击 body 时关闭模态框的问题。JS Fiddle 链接。

希望能对你有所帮助。编程愉快。

- John

---

同时这也使用了jQuery :) - John

Answer 5

你也可以使用JavaScript：

<button type="button" class="btn-custom remember" onclick="remember_show(event)">Ingatkan Saya</button>

将事件作为调用函数的参数传递。然后，您需要添加event.stopPropagation();以阻止事件在DOM树中冒泡。

function check_remember(event) {

    if (document.getElementById('rem_email').value == "") {
        alert("Harap isi email !");
    } else {
        document.getElementById('popup_remember').style.display = "none";
        event.preventDefault();
    }
    event.stopPropagation();  //<----add this to stop the event to bubble up.

};

function remember_show(event) {
    document.getElementById('popup_remember').style.display = "block";
    event.stopPropagation(); //<----add this to stop the event to bubble up.
};

现在像这样在 body 上添加一个事件监听器：

function hideModal(e){
    document.getElementById('popup_remember').style.display = "none";
    event.stopPropagation();
}

document.addEventListener('click', hideModal, false);

---

示例演示：

---

function check_remember(event) {
  if (document.getElementById('rem_email').value == "") {
    alert("Harap isi email !");
  } else {
    document.getElementById('popup_remember').style.display = "none";
    event.preventDefault();
  }
  event.stopPropagation();
};

function remember_show(event) {
  document.getElementById('popup_remember').style.display = "block";
  event.stopPropagation();
};

function hideModal(e) {
  document.getElementById('popup_remember').style.display = "none";
  event.stopPropagation();
}

var body = document;

body.addEventListener('click', hideModal, false);

#popup_remember {
  display: none;
}

<button type="button" class="btn-custom remember" onclick="remember_show(event)">Ingatkan Saya</button>

<!-- PopUp -->
<div id="popup_remember">
  <div id="REM">
    <form id="form_remember">
      <input id="rem_email" name="email" placeholder="Input Email" type="text" class="form-control" required>
      <input type="submit" id="sub_rem" value="Agree" onclick="check_remember(event)">
    </form>
  </div>
</div>

- Jai