I'm using Jquery 1.2.1 and the latest version of jqModal.  For some reason
the jqmOverlay is not positioned absolute-ly and pushes down content when
viewed in IE7.  Works fine in FF (of course).

Here is the relevant goodness:
--JS--
$(document).ready(function(){
        $('#quicktip').jqm({overlay: 40, ajax:'tips.php', target:
'.quicktip_content'});
        $('#quicktip').jqmShow();
})
--CSS--
.jqmWindow {
    display: none;
    
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -150px;
    width: 300px;
    
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

* body .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop ||
document.body.scrollTop) + Math.round(17 *
(document.documentElement.offsetHeight || document.body.clientHeight) / 100)
+ 'px');
}
--HTML--
<div class="jqmWindow" id="quicktip">
        &lt;img src="/v4/images/icons/icon_tip.png" width="48" height="48">
        <h3>Did you know...</h3>
        <p class="quicktip_content">&lt;img src="/v4/images/ajax_spinner.gif">
Loading... </p>
        <p>
                <input type="checkbox" checked="checked"
onchange="setPref('displayLoginTips',this);"> Display tips on login
                Close
        </p>
</div>
<div>
...more content...
</div>

The jqmWindow is a direct descendant of the body tag.

Screenshots:
IE:http://www.jtoo.net/~jgale/screenshots/s1.gif
FF: http://www.jtoo.net/~jgale/screenshots/s2.gif

Thanks in advance,

Jon
-- 
View this message in context: 
http://www.nabble.com/jqModal-Overlay-not-positioned-correctly-tf4822901s27240.html#a13798239
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

Reply via email to