遮罩层与模式窗口
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>jQuery UI Example Page</title><link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" /><script type="text/javascript" src="js/jquery-1.5.1.min.js"></script><script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script><script type="text/javascript">$(function(){$('#dialog').dialog({ autoOpen: false, width: 600, buttons: { "Ok": function() { $(this).dialog("close"); }, "Cancel": function() { $(this).dialog("close"); } },beforeClose:function(){ $("#full").hide();} }); });function openDialog(){var full= $("#full"); full.css("width",getClientW_H(1)+"px").css("height",getClientW_H(2)+"px").show();$("#dialog").dialog("open");}window.onresize=function(){$("#full").css("width",getClientW_H(1)+"px").css("height",getClientW_H(2)+"px");}function getClientW_H(type){if(1==type){ //widthreturn Math.max(Math.max(document.body.scrollWidth,document.body.clientWidth),Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth));}else{ //heightreturn Math.max(Math.max(document.body.scrollHeight,document.body.clientHeight),Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight))}}</script><style type="text/css">*{font-size:13px}#full{position: absolute;background:#9DA7C3;left: 0;top: 0;display: none; z-index:2;filter:alpha(opacity=50);opacity :0.5}</style> </head><body> <div><input type="button" id="btn" value="打开模式窗口" /><br><div id="full"></div><div id="dialog" title="系统提示">这是dialog</div> </body></html>
页:
[1]