In the given fiddle, I tried to develop a modal window using only html5 and css3 . The modal window is working fine but the div’s id is being displayed with the url, so if i just click back without closing the modal window and come back, the modal window remains opened.
I know its all because of the div’s id is getting added with the URL when the modal window is opened and its id is displayed with the url like this
http://localhost:90/modal.html#divModalDialog1
How can i remove the modal div’s id from the url ?
JS Fiddle – http://jsfiddle.net/bala2111/4UCGL/4/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Modal CSS 3</title>
<style type="text/css">
/*** pop-up div to cover entire area ***/
.divModalDialog {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*! important !*/
display:none;
/* last attribute set darkness on scale: 0...1.0 */
background-color:rgba(0,0,0,0.7);
text-align:center;
z-index:101;
}
/*** ! target attribute does the job ! ***/
.divModalDialog:target { display:block; }
/*** virtual frame containing controls, image and caption ***/
.divModalDialog div {
/* either absolute or fixed */
position:fixed;
top:5%;
width:100%;
height:80%;
/* rounded corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index:102;
}
#manual{
width:920px;height:440px;
background-color:#ffffff;
position:absolute;
margin-left:200px;
}
#close{
margin-left:890px;
}
</style>
<script>
function test()
{
//alert('aaa');
//window.history.go(-1);
window.location.href="http://localhost/html_modal/test.php";
}
</script>
</head>
<body>
<!-- NAV THUMBNAILS -->
<div id="divThumbnails">
<ul>
<li><a href="#divModalDialog1">Click Me</a></li>
</ul>
</div>
<!--1st LINK -->
<div id="divModalDialog1" class="divModalDialog">
<div id="manual"><span id="close"><a href="#" onclick="test();"><img src="images/close_icon.png" /></a></span></div>
</div>
</body>
</html>
Make your div default non-visible en make it visible with javascript.