If you don't want to set it as a target, consider adding an onclick event for the button labeled Click Me. This event can trigger a JavaScript function that appends the id target to the div (or another class). After that, modify .modalDialog:target to .modalDialog.target. Finally, simply remove the class when the close button is clicked.
Check out the updated Fiddle here: http://jsfiddle.net/73QXx/2/
This change should not affect your hashtag scrolling script at all.
If you still prefer the appearance of a link, you can include this CSS:
a {
color: #0645AD;
text-decoration: underline;
cursor: hand;
cursor: pointer;
}
a:visited {
color: #663366;
}
EDIT:
Note that the following line is supported only by IE11+:
pointer-events: none;
For compatibility with IE10 and lower versions, you can use this alternative approach using z-index:
pointer-events: none; => z-index: -1;
pointer-events: auto; => z-index: 10; /*This value may need adjustment based on other elements in the page*/
Here's an updated Fiddle specifically for IE9 compatibility (as well as older versions): http://jsfiddle.net/73QXx/3/
However, keep in mind that using this approach outside of IE9 or below could result in a sudden appearance of the box instead of a smooth fade-in effect.