Linux教程網 >> Linux編程 >> Linux編程 >> jQuery的插件 --- 對話框的效果（有遮罩效果）

jQuery的插件 --- 對話框的效果（有遮罩效果）

日期：2017/3/1 10:25:40 编辑：Linux編程

<%@ 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,