How to hide div when user clicks on body
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 is 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 don't know how to do this if I click the body with the modal hide.
source to share
Click on the target first. Then check if there is a click event from the popup div and if it's already hidden. 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();
});
});
source to share
I think this is what you are looking for:
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();
}
});
source to share
You can try using jQuery instead of Javascript.
$(document).ready(function(){
$('body').on('click', function(){
if($('#rem_email').val() === ''){
alert('Harap isi email !');
} else {
$('#popup_remember').hide()
}
}
//Let add your remember_show function too! It also an OnClick (As seen in the HTML).
$('btn-custom remember').on('click',function(){
$('popup_remember').show();
});
});
That your javascript code is converted to jQuery. :)
Instead, hide()
and show()
you can also use fadeOut()
and fadeIn()
to animate the opacity of an object, which you hide and show.
source to share
you can also use javascript:
<button type="button" class="btn-custom remember" onclick="remember_show(event)">Ingatkan Saya</button>
Pass the event to the arguments to the calling function. Then you need to add event.stopPropagation();
to stop the bubble event 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 an event listener in body
like:
function hideModal(e){
document.getElementById('popup_remember').style.display = "none";
event.stopPropagation();
}
document.addEventListener('click', hideModal, false);
Demo example:
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>
source to share
If you are trying to create your own modal way this might help you But this is only for the modal effect and your button click problem body
and that will close the modal. JS Fiddle link
Hope this helps. Happy coding.
source to share