CSS Modal Dialog

Ever wanted to have a custom CSS Modal dialog or present a Div as Modal Dialog? Here is quick example that I created. This can help you quick start your model css dialog.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Div Dialog Demo</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Hammad Khan">
<!-- Date: 2013-04-14 -->
<style>
body {background-color:light-blue;}
#div_dialog { width:400px;height:200px;margin-left: auto ;
margin-right: auto ;border:1px solid gray;display:none;
transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s;
box-shadow:0px 0px 15px black;border-radius:5px;}
</style>
</head>
<body">
<h2>This is a demo page to test Modal Div Dialog</h2>
<br><br>
<a href="JavaScript:Myfunction()">my link</a>
A div
Book : <input style="margin-left:20px" type="text" name=search value="search"> </div>
</body> </html> function Myfunction() { //alert("I am called"); document.getElementById('div_dialog').style.display = "block"; document.body.style.background = "gray"; document.getElementById('div_dialog').style.background = "white"; } function hideMenus() { //alert(el); if (this.id != 'div_dialog') { document.getElementById('div_dialog').style.display = "none"; document.body.style.background = "white"; } else { //alert("Button clicked, id "+this.id+", text"+this.innerHTML); document.getElementById('div_dialog').style.display = "block"; document.body.style.background = "gray"; } } document.getElementById('div_dialog').onclick = hideMenus; document.getElementById('test').onclick = hideMenus;
This entry was posted in Tutorials/Tips and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s