I need to resize a div shown as a message in blockUI so that it fills the visible screen area less some hardcoded fudge factor (so width - 100 say). The premise is that I can show a smaller image on the screen but if the user needs an enlarged image then I just show them block ui dialog sized to their screen.
The image is dynamically generated so can be sized to whatever dimensions are passed to it from the application.
I've looked and have only found code for centering a div. I'm working on this so if I find an answer I'll post it here (assuming it doesn't replicate anyone elses answers!)
Here's a very simple html snippet for the calling markup:
I'm using JQuery, here's the current code I have:
var popup = $("#popup");
var popupcontent = popup.children(".popupcontent");
var image = $(".image");
$(document).ready(function(){
$("#viewpopup").click(function(){
// Fudged indent on the top left corner
var top = 20;
var left = 20;
// Dynamically set the contents
// popupcontent.empty();
// popupcontent.append();
$.blockUI({ message: popup, css : { border : 'none', height: 'auto', 'cursor': 'auto', 'width': 'auto', 'top': top, 'left' : left } });
});
$(".close").live("click",function(){
$.unblockUI();
});
});
I've also got to figure out how to set the popupcontent height to auto fill the currently
available space (I'm using ems in my css) but I'm unsure if that's a separate question :).
Thanks :)
以上就是How do I autosize a blockui dialog to the available visible area with JQuery?的详细内容,更多请关注web前端其它相关文章!