Code: Select all
<div id="pop_up_window_container">
<div id="msgbox">
<a class="logo"><img src="images/logo.png" width="163" height="49" title="Logo" /></a>
<a class="close" href="#"><img src="images/close_window.png" width="24" height="24" title="Close Window" /></a>
<div id="content_placeholder">
</div>
</div>
</div>Code: Select all
$(document).ready(function(){
$("#pop_up_window_container").css("height", $(document).height());
$(".alert").click(function(){
$("#pop_up_window_container").show();
navIdentity = $(this).attr("identity");
$("#content_placeholder").html('<iframe src="my_script?id=' + navIdentity + '" width="100%" height="425" frameborder="0" scrolling="auto"><\/iframe>');
return false;
});
$(".close").click(function(){
$("#pop_up_window_container").hide();
return false;
});
});
$(window).bind("resize", function(){
$("#dim").css("height", $(window).height());
});This all works really well, but my problem is with the "pop_up_window_container" div. This has a semi-transparent background that is designed to overlay the whole screen, but the script I am using automatically resizes the div to do this and in the process overrides the style settings I've defined for it in the print stylesheet - I think this is because the jQuery code is applying the height value for this div indiscriminately to all stylesheets (screen and print) and not just the one I want.
Does anyone know if it's possible to tell jQuery to just target a particular stylesheet "media" rather than all of them?
Thanks in advance,
Mecha Godzilla