In IE8, the "view" link on that webpage doesn't overlay the overlay over the page... it just inserts the overlay before the webpage even though the original div was after the page content. Also, when the page is scrolled, the overlay scrolls up as well.
The examples on the official website work fine though.
I think I'm missing some css... I found that if I add margin: 0; to body, the overlay doesn't have gaps... though it also makes the main page look worse because the text has no margin.
Anyway is there any extra css that could go in...
/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
the Window's z-index value will be set to 3000 by default (in jqModal.js). You
can change this value by either;
a) supplying one via CSS
b) passing the "zIndex" parameter. E.g. (window).jqm({zIndex: 500}); */
.jqmWindow {
display: none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}
.jqmOverlay { background-color: #000; }
/* Fixed posistioning emulation for IE6
Star selector used to hide definition from browsers other than IE6
For valid CSS, use a conditional include instead */
* html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}