I'm trying to create a modal dialog for my site and the css style inside the <style> tags dosen't work but if i link it in from an external css file it applys the style fine. Wondering if theres anything i've got dont wrong here. The code is below along with a link to view. Thanks.
My Modal Dialog
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My Modal Dialog</title>
<style type="text/javascript">
body {
height:100%;
margin:0;
padding:0;
}
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background-image:url(background-trans.png);
}
#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript">
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
</head>
<body>
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
</div>
</div>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
</body>
</html>
