I am trying to create a simple error message that should disapear on page click.
Here is my Jsfiddle: http://jsfiddle.net/ZKgWR/1/
I want to hide the .super message when clicked on the page, when the message is visable.
Here is my jquery:
// show super on click
$('.error').click(function(e) {
e.preventDefault();
var position = $(this).position();
$('.super').css({
display: 'block',
position: 'absolute',
left: position.left + 50,
top: position.top
});
var super = true
});
// If .error clicked then enable the function to remove the super message
if ($('.error').show()) {
$(document).click(function() {
$('.super').hide();
});
}
// If .error clicked then enable the function to remove the super message
if ($('.error').show()) {
$(document).click(function() {
$('.super').hide();
});
}
The problem is that this part of the code is not working:
if ($('.error').show()) {
$(document).click(function() {
$('.super').hide();
});
}
Nothing appends when clicking on .error because of the function is also active when the .super is invisable.