Notification Box in CSS - #2 CSS & Javascript

Submitted by Yorkiebar on Friday, October 10, 2014 - 04:11.

Introduction:

This part is the second and final part of my notification box tutorial in which we will be styling the HTML we create in part 1, and adding Javascript functionality to the close box.

CSS:

First we want to set our CSS area in our HTML file...
  2.         <style type='text/css'>
  3.         </style>
  4. </head>
Now we want to style the elements. outerBox will have a full width, minimum height of 80 pixels, and a black background colour...
  1. .outerBox {
  2.         width: 100%;
  3.         min-height: 80px;
  4.         background-color: #2e2e2e;
  5. }
.innerBox will set the area for the message and content, which is within 980 pixels to the center of the screen...
  1. .innerBox {
  2.         width: 980px;
  3.         margin: 0px auto;
  4.         position: relative;
  5. }
.innerBox #information will have some basic font styling properties...
  1. .innerBox #information {
  2.         font-size: 16px;
  3.         text-align: center;
  4.         font-family: Verdana;
  5.         color: #ffffff;
  6.         width: 100%;
  7.         margin: 0px auto;
  8. }
And finally, the close box will be styled to look like a box. The 'X' text is already written within the HTMl of our page...
  1. .innerBox #close {
  2.         width: 40px;
  3.         height: 40px;
  4.         text-align: center;
  5.         position: relative;
  6.         top: 0;
  7.         right: 0;
  8.         color: #2e2e2e;
  9.         background-color: #ffffff;
  10. }

Javascript:

Finally we want to write the 'close' box Javascript function. First we add an inline event listener to the HTML close box to run a new function we are yet to create named 'closeBox'...
  1. <p id='close' onclick='closeBox();'>X</p>
Next we want to write our Javascript area underneath our CSS style area...
  2.  
Now we want to write our 'closeBox' function. First it gets the HTML notification box via it's ID, then it sets its visibility to 'hidden', simple...
  1. function closeBox() {
  2.         var notificationBox = document.getElementById('notificationBox');
  3.         notificationBox.style.visibility = 'hidden';
  4. }

Finished!

Tags
HTML
css
php
Javascript
notification box
Close Button

Add new comment

About text formats
  • 16 views