the overlay is not full screen in IE6 (SIMPLEMODAL 1.4.4)

[GoogleCodeExporter]

Hi eric,

When I was running the simple modal under IE6, I got the issue below (see 
screenshot), the overlay cannot cover the whole page of ie6 browser.

Moreover, another issue is that the container  
“ResetPasswordPopupMessage”(see below source code) has to define the width 
in style, otherwise the width of the container will be the same as  the width 
of browser screen( see second screen shot – only IE6,7 are having the issue). 
However, it is working fine in IE8,9,10,11.

Source code:

I am using Jquery 1.9.1 and SIMPLEMODAL 1.4.4

Link to call the $.modal :
<a id="ForgotPasswordButton" style="text-decoration: underline; cursor: 
pointer;"
                                            onclick="javascript:$('#ResetPasswordPopupMessage').modal('{minWidth:700,minHeight:400}');">
                                            Forgot your password?</a>

The popup container:
<div id="ResetPasswordPopupMessage" style="display: none; width:642px;">
                <div class="Step">
                    <h1>
                        Notice
                    </h1>
                </div>
                <div class="context">
                    <fieldset>
                        <ol>
                            <li>
                                <p>
                                    If you want to reset your password, please click "Proceed". Your new password will
                                    be sent to your email address.</p>
                            </li>
                            <li><a class="Button Cancel" style="color:#FFFFFF;" href="">
                                <span>Proceed</span></a> <a class="Button Progress" style="color: #FFFFFF;" onclick="javascript:$.modal.close();">
                                    <span>Close</span></a>
                                <div class="Clear">
                                </div>
                            </li>
                        </ol>
                    </fieldset>
                </div>
            </div>

Original issue reported on code.google.com by kimzhuma...@gmail.com on 7 Mar 2014 at 4:47

Attachments:

• Ie6.png
• Ie7.png

[GoogleCodeExporter]

In order to fix the issue I have to add resize function.

//call after the $.modal()
function ResizeOverlay() {

    var winHeight = $(window).height();
    var winWidth = $(window).width();
    var docHeight = $(document).height();
    var docWidth = $(document).width();
    if (winHeight && winWidth) {
        $("#simplemodal-overlay").css('height', winHeight);
        $("#simplemodal-overlay").css('width', winWidth);
    }
    if (docWidth && docHeight) {

        $("#simplemodal-overlay").css('height', docHeight);
        $("#simplemodal-overlay").css('width', docWidth);
    }
}

$(window).on("resize", methodToFixWinLayout);
function methodToFixWinLayout(e) {
    var winHeight = $(window).height();
    var winWidth = $(window).width();
    //adjust elements css etc.....
    if (winHeight && winWidth) {
        $("#simplemodal-overlay").css('height', winHeight);
        $("#simplemodal-overlay").css('width', winWidth);
    }
}

$(document).on("resize", methodToFixDocLayout);
function methodToFixDocLayout(e) {
    var docHeight = $(document).height();
    var docWidth = $(document).width();
    //adjust elements css etc.....
    if (docWidth && docHeight) {
        $("#simplemodal-overlay").css('height', docHeight);
        $("#simplemodal-overlay").css('width', docWidth);
    }
}

Original comment by kimzhuma...@gmail.com on 10 Mar 2014 at 11:23

[GoogleCodeExporter]

Here is the code for full screen overlay using CSS only....

http://www.corelangs.com/css/box/fulloverlay.html

Ling

Original comment by lingma...@gmail.com on 31 May 2014 at 6:28