Question

我正在使用此代码：

JSON

这是我的HTML：

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";
};

问题是，我不知道如何点击身体模态会隐藏..

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

Check jsFiddle

Answer 2

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

WORKING : DEMO

UPDATED DEMO

<强> 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。：）

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

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

示例演示：

＆＃13;

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

＆＃13;

#popup_remember {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 5

如果您尝试制作自定义模式，这可能会对您有所帮助。但这仅适用于模态效果和单击try { //Load the view and controller FXMLLoader loader = new FXMLLoader(getClass().getResource("displayPassword.fxml")); Parent displayPassword = (Parent)loader.load(); Scene displayPasswordScene = new Scene(displayPassword); displayPasswordController controller = loader.getController(); //Generate the password and set it controller.setPwdValue(Pastis.model.getNewPassword()); //Load the new view on the stage Main.getStage().setScene(displayPasswordScene); Main.getStage().show(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); }的问题，它将关闭模态。 JS Fiddle Link

希望它有所帮助。快乐的编码。

如何在用户点击正文时隐藏div

5 个答案:

示例演示：