jQuery的插件 --- 对话框的效果（有遮罩效果）

最新推荐文章于 2021-06-21 06:30:17 发布

hanxiaoshuang321123

最新推荐文章于 2021-06-21 06:30:17 发布

阅读量1.2k

点赞数

文章标签： jquery stylesheet function dialog string path

本文链接：https://blog.csdn.net/hanxiaoshuang123/article/details/7397146

版权

jQuery的插件 --- 对话框的效果 （有遮罩效果）
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'dialog.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js">
</script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js">
</script>
		<link rel="stylesheet" type="text/css"
			href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">

		<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

#dialog_link {
	padding: .4em 1em .4em 20px;
	text-decoration: none;
	position: relative;
}

#dialog_link span.ui-icon {
	margin: 0 5px 0 0;
	position: absolute;
	left: .2em;
	top: 50%;
	margin-top: -8px;
}
</style>
		<script type="text/javascript">

//页面加载完毕触发匿名函数
$(document).ready(function() {

	//点击事件处理 打开dialog 
	$("#dialog_link").click(function() {

		//打开窗口
			//alter("fdsf");//没有返回值   会跳转页
			$("#dialog").dialog("open");
			return false;//返回值为false，不去执行<a href="#"></a>连接的操作 

		});
		
		//dialog注册 
		//当你把$("#dialog")注册为对话框时，$("#dialog")的内容也将被隐藏掉 
		$("#dialog").dialog( {
			autoOpen : false,//设置对话框是否打开 ，如果为false，则不打开 ，如果为true，则自动打开，默认值为fallse,文本也将被隐藏 
			//width:600,//宽度的设置 
			/*height:300*/
			buttons : {
				"确定" : function() {
					$(this).dialog("close");
				},
				"取消 " : function() {
					$(this).dialog("close");
				}
			},
			bgiframe:false,
			closeOnEscapt:true,//默认值是true，当按下esc键的时候关闭窗口 
			draggable:true, //拖拽的效果，默认是 true
			show:"slide", //展开的时候 显示的动画效果 
			hide:"slide",//关闭窗体时的效果    有toggle  slide
			modal:true, //ture是遮罩的效果 ，默认的是fasle 
			position:"top",//弹出的对话框弹出的位置  top，left，rigth，right 
			title:"添加老王",  //设置对话框的标题 
			open:function(event,ui){
				alert("打开的时候触发的事件");
			}
		});
		//添加事件
		$("#dialog_link,").hover(function(){
			$(this).addClass("ui-state-hover");
		},function(){
			$(this).removeClass("ui-state-hover");
		});
	});
</script>
	</head>

	<body>
		<p>
			<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span
				class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
		</p>
		<div id="dialog" title="Dialog Title">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
				eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
				ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
				aliquip ex ea commodo consequat.
			</p>
		</div>
	</body>
</html>
注:遮罩效果使用的属性为：modal:true,

hanxiaoshuang321123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的插件 --- 对话框的效果（有遮罩效果）

jQuery的插件 --- 对话框的效果（有遮罩效果）<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> "
复制链接

扫一扫