asked on

Javascript HELP! need to create a function to hide alert when clicked.

hi experts,

I have some html code and css3 animation for an alert box to pop up with an error for my email validation in php.

However I need to make the white cross on each box clickable and also make them disappear when clicked.

im nit sure how to do this in js and im not even sure if it can be embedded directly into php??

Thanks please see code below.

PHP & HTML

function validation_errors($error_message){ //Function for displaying validation errors

// HTML & CSS Alert Box
    
$error_message = <<< EOS

<style>
html,
body {
	height: 100%;
}

.container {
	display: flex;
	height: 10%;
	justify-content: center;
	align-items: center;
}

.rectangle {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	positon: relative;
	width: 50px;
	height: 50px;
	background: #e74c3c;
	transform: scale(0);
	border-radius: 50%;
	color: white;
    margin-bottom: 10px; 
	opacity: 0;
	overflow: hidden;
	animation: scale-in .3s ease-out forwards,
		expand .35s .25s ease-out forwards;
}

.notification-text {
	display: flex;
	align-items: center;
	padding: 0 16px;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	animation: fade-in .65s ease-in forwards;
}

@keyframes scale-in {
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes expand {
	50% {
		width: 350px;
		border-radius: 6px;
	}
	100% {
		width: 414px;
        height: 40px;
		border-radius: 4px;
		box-shadow: 0px 1px 3px 0px rgba(0,0,0,.2),
								0px 1px 1px 0px rgba(0,0,0,.14),
								0px 3px 3px -1px rgba(0,0,0,.12);
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: .8;
	}
}

.notification-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 50px;
  width: 18px;
  height: 18px;
  line-height: 15px;
  text-align: center;
  text-decoration: none;
  color: white;
}
</style>

<div id="hide">
<div class='container'>
 <div class='rectangle'>
  <div class='notification-text'>
   <span>&nbsp;&nbsp;$error_message</span>
   <span class="notification-close">&times;</span>
   </div>
  </div>
 </div>
</div> 

EOS;
return $error_message; 
}

Open in new window

this is what it looks like so far, it displays errors and animates well. I just need to embed the js to hide the boxes when I click the white cross. but bare in mind sometimes I get 6 alert boxes if all email fields have errors, so I need to be able to hide them all not just one.

Marco Gasi

You have to use javascript, better jQuery. Goigle for jQuery and kearn hiw to add it to your page: yiu can download it or even better linj it through cdn.

Once you have jQuery in place, just put this at the bottom of your page immexiately befor the body closing tag and after the script tag you have to add jQuery to your page:

$(document).ready(function(){
    $(document).on('click', '.notifications-close', function(){
      $(this).parents('#hide').hide();
});
});

Open in new window

Mike Moore

ASKER

thanks for the comment,

since I am building a php CMS I have a footer include do you think its a good idea to connect the CDN and define the function there??? as this way jQuery and the functions will be available to call in all php pages or should I hard code it into the html??

Leonidas Dosas

Pure javascript code:

var cross=document.getElementsByClassName('notification-close');
for(var i=0;i<cross.length;i++){
cross[i].addEventListener('click',function(){
  this.style.display='none';
});
}

Open in new window

Add this script before the </body>.(At the end of the body )

ASKER CERTIFIED SOLUTION

Leonidas Dosas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mike Moore

ASKER

thats exactly what I was looking for, the pure js however this script only hides the cross not the entire alert box. it looks like the jQuery code above would achieve this, however I would like to avoid using jQuery for this little bit of code

Thanks