﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="alternate stylesheet" type="text/css" href="styleblue.css" title="blue"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>opacity</title>
<style type="text/css">
div.blogcss{
	background-color: #FFCCCC;
	border: thin dashed #C0C0C0;
	vertical-align: middle;
	text-align: left;
	white-space: normal;
	padding: 2px;
	margin: 5px;
}

div.blogcss:before{
	content:"CSS:&nbsp;";
	font-style:italic;
	font-size:14px;
	font-weight:bold;
}

div.bloghtml{
	background-color: #FFFFCC;
	border: thin solid #C0C0C0;
	vertical-align: middle;
	text-align: left;
	white-space: normal;
	padding: 2px;
	margin: 5px;
}


div#mask {
	background-color: #C0C0C0;
	width: 100%;
	height: 100%;
	position:fixed;
	left:0;
	top:0;
	z-index:100;
	
	/*opacity setting for ie*/
	filter:alpha(opacity=50);
	/*opacity setting for early version of firefox*/
	-moz-opacity:0.5;
	/*opacity setting for early version of safari*/
	-khtml-opacity: 0.5;
	/*opacity setting in css3*/
	opacity: 0.5;
}
div#content {
	background-color: #FFFFCC;
	width: 500px;
	height: 200px;
	position: absolute;
	left: 40px;
	top: 40px;
	text-align: right;
	z-index: 101;
}
#close {
	font-weight: bold;
	font-size:14px;
	cursor: pointer;
}

#close:hover{
	background-color:orange
}
#show {
	padding: 5px;
	cursor: pointer;
	background-color: #FFCCCC;
}
#show:hover {
	border-style: dashed;
	border-width: thin;
}

div.post div.entry h1, div.post div.entry h2, div.post div.entry h3{
	margin-bottom:12px;
	margin-top:24px;
}

div.post div.entry a:hover {
	background-color:blue;
}

body div p { font-size: 14px; }
div p { font-size: 12px; }

</style>
<script type="text/javascript">
<!--
	function close_popup()
	{
		document.getElementById("mask").style.visibility = "hidden";
		document.getElementById("content").style.visibility = "hidden";
	}
	
	function show_popup()
	{
		document.getElementById("mask").style.visibility = "visible";
		document.getElementById("content").style.visibility = "visible";
	}
-->
</script>

</head>

<body>

<div id="mask" style="visibility:hidden"></div>
<div id="content" style="visibility:hidden"><a id="close" onclick="close_popup();">close</a></div>
<div><span id="show" onclick="show_popup();">Click me to show the popup dialog</span></div>
</body>

</html>

