the overlay is not full screen in IE6 (SIMPLEMODAL 1.4.4)
Opened this issue · 2 comments
GoogleCodeExporter commented
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:
GoogleCodeExporter commented
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 commented
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