Published on: 25 October, 2017

How to create transparent animated background with pop up message box using CSS3 and JavaScript?

Posted by andy | 233 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

In this article, you will learn how to create a transparent fading background with pop up message box. I will show you how we can use animation in CSS3 and Javascript to accomplish this example.

Let's get started with the html code first. In this example, we will have two visible html objects which are a button is used to trigger the pop up message and transparent background and a message box it self. For the transparent background, I created manually on the fly using Javascript. You do not have to follow this method. Alternatively, you can include it as part of the html code.

Here are the html codes for the button and message box html.

<button id="btnAlert" type="button" onclick="showPopupMessageBox('Hi there!!!! Welcome to the example of popup message with transparent background.')">Show Message</button>
<div id="message-box">
	<div id="message-content"></div>
	<button id="btnClose" onclick="closeMe()">Close</button>
</div>

If you see above code, you will notice that I have added functions binded to both buttons. The function called showPopupMessageBox with parameter message will be used to display the message box with transparent background. While the closeMe function will be used to close the pop up message box and transparent background.

The next step we want to do is to hide the message box by default. We can hide it by using CSS. Here is the part of the css for the message box.

<style>
#message-box{
	width:300px;
	height:120px;
	text-align:center;
	border:solid 1px #bac0c3;
	border-radius:5px;
	box-shadow: 5px 10px 25px 5px #575754;
	position:fixed;
	left:50%;
	top:50%;
	margin-left:-150px;
	margin-top:-60px;
	z-index:1001;
	display:none;
	background:#fff;
	animation: animationDropCenter 1s;
}

#message-content{
	padding:15px;
}

@keyframes animationDropCenter {
	0% {
		top:0%;
	}
}
</style>

Let me explain how the CSS above works. Because we want to display the message box in the center of the page, we want to set the position to fixed. There is a difference between absolute and fixed position. The fixed position set an element positioned relative to the viewport or browser itself, while the position absolute set an element positioned relative to next parent element. You can set to absolute if you want, you just need to place the message box HTML code under the body tag directly or if you have a wrapper you can set it under the wrapper but remember to set the parent position to relative. Please note the z-index of this object is to 1001. Z-index is a CSS property that allows to position an object/element in front/behind of other elements. If you set a z-index of an object to 10 and another object with z-index 20. The z-index 20 object will appear on top of z-index 10. You can read more details about z-index on this article.

The position left and top property of 50% ensure that we want it to be centered correctly, if you see carefully on the margin left and top, you can see that I included a negative value, those values are calculated by dividing by 2 the values of width and height, this will create an equal center position from the half value of the height and width values respectively.

There is an animation keyframe created for the message box. What I want to achieve is when showing up the message box, I want to create an effect of a message box falls down from top to the center. This can be achieved by setting the initial top position 0% and in 1 second will set the position to 50%.

The next css code will be used to style the transparent background.

<style>
#transparent-bg{
	position: fixed; 
	top: 0%; 
	left: 0%; 
	width: 100%; 
	height: 100%; 
	background:#000;
	-moz-opacity: 0.30; 
	opacity: .30; 
	filter: alpha(opacity=30);
	z-index: 1000; 
	-webkit-animation: animateBackground 1s;
	animation: animateBackground 1s ;
}

@keyframes animateBackground {
	from {opacity: 0.8;}
	to {opacity: 0.30;}
}
</style>

As we want the transparent background to cover the whole page. We set the position to be fixed as well but with the position starting from the top far left which is 0% and we set the height and width to 100%. This will ensure it cover the whole page. We also need to set the z-index to 1000, just about 1 point lower than the message box to make sure the message box appears on top of this transparent background.

As we want to fade the background, we set the background initial color to black which is #000 and the opacity to 0.30. The opacity value range between 0 to 1, so in this case we try to reduce about 70% lighter color of black background. We also going to add an animation, so during the display of this transparency background we want to do an animation fading from 0.8 to 0.3 in 1 second.

The next step is to write the javascript codes. Here is the full code.


If we see on the function createTransprentBackground, we perform a check to see if a div object tag with id transparent-bg has already been created in the HTML DOM or not. If it has not we then create it and insert it after the body tag. The function prepend in here means insert before an object, while append function means insert it after the end of the object. The transparent background will then be created when we call the function showPopupMessageBox. The closeMe function is used to hide both transparent background and message box.

That's all. I hope the article is easy to follow and if you have any question, feel free to post your question below.

See in action.

You can see the demo by clicking the following button.

Download demo file.

You can download the demo example file in here.

Download

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Share your article with us and add your own google adsense account to earn extra money. Plus, you can promote a link back to your site.
Related Articles
Published on: 13 July, 2016
Ever imagine that you can now easily create a bouncing ball using CSS3 only? No javascript or image is required to do this. Thanks to the powerful attribute of CSS3 animation.
Published on: 24 March, 2016
You probably never thought about creating a heart shape completely using CSS3. Furthermore, you can include an animation to show the heart is actually beating. This is can be easily done with CSS3 animation. No flash or images are required.
Published on: 16 December, 2015
Creating a mobile menu button is really simple using CSS3. You may find others still using an image to create those 3 horizontal lines. With the introduction of :after and :before css3 attributes, this menu can be easily done by specifying the position content of the object and adding a content attribute.
Related Tutorials
Published on: 28 June, 2014
Learn how to use media queries in CSS3. Media queries are simple conditions used to targetting different devices for tables, phones or desktop computers. As each device may have different view size, media queries become so handy to use to display the content dimension correctly.
Published on: 28 June, 2014
Learn how to use advanced selectors in CSS3. By using the built in pseudo-class, performing a selector in CSS3 is so much easy.
Published on: 14 May, 2014
Learn how to use multiple-column property in CSS3. To create multiple columns in CSS3 is now so handy, you just need to include a css built-in keyword column-count to do the job for you. No more table layout required.
Published on: 13 May, 2014
Learn how to use box-sizing property in CSS3. As you know many browsers treat margin and padding differently. When you combine with width or height of an element box, you find out that the final dimension is completely different when you view with different browser. Well, this now can be easily taken care by using the new CSS box-sizing property.
Published on: 09 May, 2014
Learn how to use opacity property in CSS3. So what is actually opacity? CSS3 Opacity defines a transparency level of an element. The property value of opacity is range from 0 to 1.