I am using this code:

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

and this my 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>

The problem is, i do not know how to when click body modal will hide..

I am using this code:

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

and this my 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>

The problem is, i do not know how to when click body modal will hide..

• javascript
• html
• css

5 Answers 5

I think this is what you looking for:

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

First get clicked target. Then check if the click event is out of popup div and if it is hidden already. Something like this should work:

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

You could try using jQuery instead of just 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();
    });
});

That's your javascript code converted to jQuery. :)

Instead of hide() and show(), you can also use fadeOut() and fadeIn() to animate the opacity of the object you are hiding and showing.

If your trying to make custom modal this may helps you. But this is only for the modal effect and your problem about clicking the body and it will close the modal. JS Fiddle Link

Hope it helps. Happy Coding.

you can use javascript too:

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

Pass the event in the arguments of the calling function. Then you need to add event.stopPropagation(); to stop the event to bubble up in the DOM tree.

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

Now add a event listener on the body like:

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

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

Sample Demo:

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>