pop up modal not working properly - html

Question

i am making a website for my college as a project.To show you i have hosted the same on a free
hosting site. link http://vivace.net23.net/ .Now in the informal section of menu i wanted to put a pop up modal here is the fiddle..http://jsfiddle.net/karn21/73QXx/.
Click Me
<div id="openModal" class="modalDialog">
<div>
X
</div>
</div>
But on click it is not working.Please help me

Answer 1

Instead of setting it as a target, you could set an onclick event for the Click Me button that triggers a JavaScript function to append the id target to the div (or another class). Then, change .modalDialog:target to .modalDialog.target. Then, just remove the class when the close button is clicked.
New Fiddle: http://jsfiddle.net/73QXx/2/
That shouldn't interfere with your hastag scrolling script.
Also, if you still wanted it to appear as a link, you can add this:
CSS:
a {
color: #0645AD;
text-decoration: underline;
cursor: hand;
cursor: pointer;
}
a:visited {
color: #663366;
}
EDIT:
This line is only supported by IE11+:
pointer-events: none;
Here is an alternative that you can add using an HTML IF to check if the version is IE10 or less:
pointer-events: none; => z-index: -1;
pointer-events: auto; => z-index: 10; /*This may need to be increased depending
on the elements on the page*/
New Fiddle for IE9 (and many other versions including anything that the old version can support): http://jsfiddle.net/73QXx/3/
However, the downside and why this should not be used for anything except IE9 or lower (which is possible with HTML IF) is that the box suddenly appears instead of fading in.