Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to take out the div's id displaying in the url ? - JS Fiddle Added
    primarykey
    data
    text
    <p>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.</p> <p>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</p> <pre><code>http://localhost:90/modal.html#divModalDialog1 </code></pre> <p>How can i remove the modal div's id from the url ?</p> <p>JS Fiddle - <a href="http://jsfiddle.net/bala2111/4UCGL/4/" rel="nofollow">http://jsfiddle.net/bala2111/4UCGL/4/</a></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Modal CSS 3&lt;/title&gt; &lt;style type="text/css"&gt; /*** 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; } &lt;/style&gt; &lt;script&gt; function test() { //alert('aaa'); //window.history.go(-1); window.location.href="http://localhost/html_modal/test.php"; } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- NAV THUMBNAILS --&gt; &lt;div id="divThumbnails"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#divModalDialog1"&gt;Click Me&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!--1st LINK --&gt; &lt;div id="divModalDialog1" class="divModalDialog"&gt; &lt;div id="manual"&gt;&lt;span id="close"&gt;&lt;a href="#" onclick="test();"&gt;&lt;img src="images/close_icon.png" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload