В данной скрипте я попытался разработать модальное окно, используя только html5 и css3.Модальное окно работает нормально, но идентификатор div отображается с URL, поэтому, если я просто нажму назад, не закрывая модальное окно, и вернусь, модальное окно останется открытым.
Я знаю, что все из-заидентификатор div добавляется вместе с URL, когда открывается модальное окно и его идентификатор отображается с таким URL-адресом
http://localhost:90/modal.html#divModalDialog1
Как я могу удалить идентификатор модального div из 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>