用户单击正文时如何隐藏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>

问题是，我不知道单击正文模式何时会隐藏..

Answer 1

首先获得点击目标。 然后检查click事件是否超出popup 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();
    });
});

检查jsFiddle

Answer 2

我认为这就是你要找的东西：

工作：演示

更新的演示

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

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。 :)

您还可以使用fadeOut()和fadeIn()来动画您隐藏和显示的对象的不透明度，而不是hide()和show() 。

Answer 4

你也可以使用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> 

Answer 5

如果您尝试制作自定义模式，这可能会对您有所帮助。 但这仅适用于模态效果以及关于单击body问题，它将关闭模态。 JS Fiddle Link

希望能帮助到你。 快乐的编码。

Answer 6

$('#myp').click(function(e) {
  e.preventDefault()
  e.stopPropagation()
  $('.pmenu').toggle('display')
  console.log('alert')
})
$('body').click(function(e) {
  
  $('.pmenu').css('display', 'none')
  // $('.pmenu').toggle('display', 'none')
  
})