遮罩层与模式窗口

最新推荐文章于 2023-02-21 15:04:33 发布

iteye_133

最新推荐文章于 2023-02-21 15:04:33 发布

阅读量129

点赞数

分类专栏： jQuery 文章标签： CSS jQuery UI HTML ViewUI

本文链接：https://blog.csdn.net/iteye_133/article/details/82067748

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏


<!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){ //width
					return Math.max(Math.max(document.body.scrollWidth,document.body.clientWidth),
						Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth));
				}else{      //height
					return 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="打开模式窗口" onclick="openDialog()"/><br>

			<div id="full"></div>

			<div id="dialog" title="系统提示">
				这是dialog
			</div>



	</body>
</html>

iteye_133

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
遮罩层与模式窗口

[code="html"] jQuery UI Example Page $(function(){ $('#dialog').dialog({ autoOpen: false, width: 600, ...
复制链接

扫一扫

专栏目录