首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JqueryUI插件dialog实现遮罩的成效

2013-10-27 
JqueryUI插件dialog实现遮罩的效果?我们所谓的遮罩效果,就是当我们点击页面中的一个按钮后,弹出来一个对话

JqueryUI插件dialog实现遮罩的效果

?

我们所谓的遮罩效果,就是当我们点击页面中的一个按钮后,弹出来一个对话框后,就不能再点击页面中的其他内容了。正如图所示,本身的页面已经变为浅灰色的了。

下面我们就来具体看一下遮罩效果具体实现的代码分析。

1、? 首先,我们要新建一个JSP页面,在JSP页面中要引入相应的jQueryUI插件以及相应的CSS样式文件。如下:

?<!-- 引入所需的jquery插件的文件 -->

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.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>

2、 我们要实现页面显示的效果。代码如下:


这个页面的代码很简单了,相信大家都可以看得明白了。

3、 下面我们就来实现这个遮罩效果的代码了。

<script type="text/javascript"> $(document).ready(function(){ $("#dialo").click(function(){ $("#dialog").dialog("open") return false; }); $("#dialog").dialog({ autoOpen:false, width:600,//宽度 buttons:{ "取消":function(){ $(this).dialog("close") } }, bgiframe:false, closeOnEscape:false,//按esc退出默认的true draggable:false, //拖拽默认是true hide:"toggle",//关闭窗口的效果 modal:true, //遮罩效果默认是false不遮住 position:"center", //对话框弹出的位置,top,left,right,center,默认是center show:"slide",//打开窗口的效果 title:"对话框遮罩效果的实现"//设置对话框的标题 }); }); </script>

?

热点排行