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

Linux大全评论153 views阅读模式
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.     <head>  
  10.         <base href="<%=basePath%>">  
  11.   
  12.         <title>My JSP 'dialog.jsp' starting page</title>  
  13.   
  14.         <meta http-equiv="pragma" content="no-cache">  
  15.         <meta http-equiv="cache-control" content="no-cache">  
  16.         <meta http-equiv="expires" content="0">  
  17.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.         <meta http-equiv="description" content="This is my page">  
  19.         <!--   
  20.     <link rel="stylesheet" type="text/css" href="styles.css">  
  21.     -->   
  22.         <script type="text/javascript"  
  23.             src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js">  
  24. </script>  
  25.         <script type="text/javascript"  
  26.             src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js">  
  27. </script>  
  28.         <link rel="stylesheet" type="text/css"  
  29.             href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">  
  30.   
  31.         <style type="text/css">  
  32. body {  
  33.     font: 62.5% "Trebuchet MS", sans-serif;  
  34.     margin: 50px;  
  35. }  
  36.   
  37. #dialog_link {  
  38.     padding: .4em 1em .4em 20px;  
  39.     text-decoration: none;  
  40.     position: relative;  
  41. }  
  42.   
  43. #dialog_link span.ui-icon {  
  44.     margin: 0 5px 0 0;  
  45.     position: absolute;  
  46.     left: .2em;  
  47.     top: 50%;  
  48.     margin-top: -8px;  
  49. }  
  50. </style>  
  51.         <script type="text/javascript">  
  52.   
  53. //页面加载完毕触发匿名函数  
  54. $(document).ready(function() {  
  55.   
  56.     //点击事件处理 打开dialog   
  57.     $("#dialog_link").click(function() {  
  58.   
  59.         //打开窗口  
  60.             //alter("fdsf");//没有返回值   会跳转页  
  61.             $("#dialog").dialog("open");  
  62.             return false;//返回值为false，不去执行<a href="#"></a>连接的操作   
  63.   
  64.         });  
  65.           
  66.         //dialog注册   
  67.         //当你把$("#dialog")注册为对话框时，$("#dialog")的内容也将被隐藏掉   
  68.         $("#dialog").dialog( {  
  69.             autoOpen : false,//设置对话框是否打开 ，如果为false，则���打开 ，如果为true，则自动打开，默认值为fallse,文本也将被隐藏   
  70.             //width:600,//宽度的设置   
  71.             /*height:300*/  
  72.             buttons : {  
  73.                 "确定" : function() {  
  74.                     $(this).dialog("close");  
  75.                 },  
  76.                 "取消 " : function() {  
  77.                     $(this).dialog("close");  
  78.                 }  
  79.             },  
  80.             bgiframe:false,  
  81.             closeOnEscapt:true,//默认值是true，当按下esc键的时候关闭窗口   
  82.             draggable:true, //拖拽的效果，默认是 true  
  83.             show:"slide", //展开的时候 显示的动画效果   
  84.             hide:"slide",//关闭窗体时的效果    有toggle  slide  
  85.             modal:true, //ture是遮罩的效果 ，默认的是fasle   
  86.             position:"top",//弹出的对话框弹出的位置  top，left，rigth，right   
  87.             title:"添加老王",  //设置对话框的标题   
  88.             open:function(event,ui){  
  89.                 alert("打开的时候触发的事件");  
  90.             }  
  91.         });  
  92.         //添加事件  
  93.         $("#dialog_link,").hover(function(){  
  94.             $(this).addClass("ui-state-hover");  
  95.         },function(){  
  96.             $(this).removeClass("ui-state-hover");  
  97.         });  
  98.     });  
  99. </script>  
  100.     </head>  
  101.   
  102.     <body>  
  103.         <p>  
  104.             <a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span  
  105.                 class="ui-icon ui-icon-newwin"></span>Open Dialog</a>  
  106.         </p>  
  107.         <div id="dialog" title="Dialog Title">  
  108.             <p>  
  109.                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  
  110.                 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim  
  111.                 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  
  112.                 aliquip ex ea commodo consequat.  
  113.             </p>  
  114.         </div>  
  115.     </body>  
  116. </html>  
  117. 注:遮罩效果使用的属性为：modal:true,  

企鹅博客
  • 本文由 发表于 2020年9月15日 17:29:13
  • 转载请务必保留本文链接：https://www.qieseo.com/132912.html

发表评论