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、 我们要实现页面显示的效果。代码如下：
[html] view plaincopyprint?
<body>
<h1>对话框的遮罩效果</h1>
<a href="#" id="dialo" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
<div id="dialog" title="Dialog Title">
<p>你好啊！你已经实现了遮罩的效果！</p>
</div>
</body>
<body>
<h1>对话框的遮罩效果</h1>
<a href="#" id="dialo" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
<div id="dialog" title="Dialog Title">
<p>你好啊！你已经实现了遮罩的效果！</p>
</div>
</body>
这个页面的代码很简单了，相信大家都可以看得明白了。
3、 下面我们就来实现这个遮罩效果的代码了。
[javascript] view plaincopyprint?
<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>
<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>
http://www.myexception.cn/web/1461678.html
分享到：
相关推荐
jQueryUI jQueryUI插件 键盘插件 基于 jQueryUI 的小键盘 可灵活修改
添加按钮弹出层jqueryui实现，dialog
两个版本：一个替换ui close按钮，对三个按钮设立同样css;一个不替换，修改ui的css文件；完美打开多个对话框，并可以分别控制最大最小关闭。jquery文件没有包含进来。
基于jquery的BlockUI做的遮罩层
jQuery插件 实现图片文字遮罩效果 jQuery插件 实现图片文字遮罩效果 jQuery插件 实现图片文字遮罩效果
嗯 包含大量的基于jquery的ui插件 效果很好看
这是一款非常实用的jQuery图片点击弹出遮罩层标记注释特效。该遮罩层插件在用户点击图片的时候会弹出一个半透明的遮罩层，在遮罩层上你可以标记图片的任意位置，为它加上什么文字。
jquery ui插件实现页面主题自由切换 jquery ui插件实现页面主题自由切换
php + jquery ui插件 + jquery pager插件 实现新闻的 标签分类 + 无刷新分页
Jquery UI dialog 详解 (弹出层) 包含jquery弹出层的详细介绍，以及代码用例
jQuery UI 是一套 jQuery 的页面 UI 插件，包含很多种常用的页面空间，例如 Tabs（如本站首页右上角部分） 、拉帘效果（本站首页左上角）、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多...
实现弹出层不再难，只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如：我想要这里是弹出浮动遮罩层</div> 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok')...
里面是经过修改的jquery.ui.dialog.js（版本jQuery UI Dialog 1.8.12），添加了parentElement: 'body'，详情查看http://forum.jquery.com/topic/dialog-will-move-its-div-tag-to-body
jQuery官方UI插件 jQuery官方UI插件 jQuery官方UI插件 jQuery官方UI插件
jQuery ui drag插件实现浮动div拖动排列布局代码 jQuery ui drag插件实现浮动div拖动排列布局代码
JQuery上传插件遮罩层插件，适合用于后台开发使用。里面包含遮罩层上传图片文件等示例。
主要用于便捷的网页弹框开发，引用方法如下：（可参考http://blog.csdn.net/lz465350/article/details/42268965） <script src="jquery-... <script type="text/javascript" src="ui/jquery.ui.dialog.js"></script>
利用Jquery几行代码就可以实现遮罩层的效果。
Bootstrap实现遮罩层 参考文档： http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档： http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 ...
jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库