ad

Modal Window with HTML and CSS

modal

Modal Windows is a sub window used to show a subscription form, login form or other kind of things to draw the visitors’ attention to something useful. In this post, we will see how to create a simple dialog box with HTML and CSS only.

Modal Windows with HTML and CSS

Modal Windows with HTML and CSS

In this tutorial, I am using simple text content in the modal box. You can also use HTML content or form to make it even better.

Demo

HTML  code: This is the body part of the page. We have added a Model box in the page that will be visible only after clicking on the Click me button

<div id="wrap">
	<h1>Modal Windows with HTML and CSS</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p><a id="click" href="#modal-outer">Click Me</a></p>
	<div id="modal-outer">
		<div id="modal">
			<h2>Example Content Heading</h2>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<a href="#close" title="Close">Close</a>
		</div>
	</div>
</div>

CSS Code: Now give the web page some style to make it look good. I am trying to use flat colors for better user experience.

<style>
body
{
background-color: #e74c3c;
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #fff;
font-weight: 200;
font-size: 1.5em;
line-height: 1.5;
}
#wrap{
margin: 0 auto;
width: 800px;
padding: 40px 0;
}

/* modal wrapper */
#modal-outer{
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background: gray;
background: rgba(0, 0, 0, .5);
filter: alpha(opacity=50);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#modal-outer:target {
display: block;
}
#modal h2
{
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 1.6em;
font-weight: 300;
opacity: 0.8;
background: rgba(0,0,0,0.1);
border-radius: 3px 3px 0 0;
}

/* modal inner */
#modal{
width: 560px;
height: auto;
visibility: visible;
display: block;
transform: translateX(-50%) translateY(-50%);
z-index: 6000;
padding-bottom:10px;
position: relative;
margin: 90px auto 40px;
text-align: center;
overflow: visible;
background-color: #d94839;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

}
#modal p
{
padding: 10px 20px;
text-align: left;
font-size: 1.1em;
line-height: 1.3;
font-weight: 500;
}
#modal a[href="#close"] 
{
background: rgba(0,0,0,0.2);
padding: 5px 12px;
margin: 0 auto;
text-decoration: none;
color: #fff;
}
</style>

 

Tags: |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

0 Comments

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker