JqueryUI插件dialog实现遮罩的效果
通过简单的学习了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、 我们要实现页面显示的效果。代码如下:
- <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、 下面我们就来实现这个遮罩效果的代码了。
- <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>
相关推荐
jQuery插件 实现图片文字遮罩效果 jQuery插件 实现图片文字遮罩效果 jQuery插件 实现图片文字遮罩效果
jQueryUI jQueryUI插件 键盘插件 基于 jQueryUI 的小键盘 可灵活修改
添加按钮弹出层jqueryui实现,dialog
两个版本:一个替换ui close按钮,对三个按钮设立同样css;一个不替换,修改ui的css文件;完美打开多个对话框,并可以分别控制最大最小关闭。jquery文件没有包含进来。
嗯 包含大量的基于jquery的ui插件 效果很好看
jquery ui插件实现页面主题自由切换 jquery ui插件实现页面主题自由切换
jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多...
php + jquery ui插件 + jquery pager插件 实现新闻的 标签分类 + 无刷新分页
里面是经过修改的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拖动排列布局代码
主要用于便捷的网页弹框开发,引用方法如下:(可参考http://blog.csdn.net/lz465350/article/details/42268965) <script src="jquery-... <script type="text/javascript" src="ui/jquery.ui.dialog.js"></script>
JQuery 鼠标悬浮,图片遮罩效果 JQuery 鼠标悬浮,图片遮罩效果
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库
NULL 博文链接:https://taotie119.iteye.com/blog/2075536
基于jquery的BlockUI做的遮罩层
jquery ui插件库文件,包含jquery必需的库文件以及各个用法示例
jquery UI插件,丰富的界面插件
JQuery UI 的对话框的一些属性的用法
一个简单兼容的蒙版遮罩效果,可以在任意个元素上进行遮罩效果。里面有简单的例子。