JqueryUI插件dialog实现遮罩层

最新推荐文章于 2020-02-07 16:10:22 发布
最新推荐文章于 2020-02-07 16:10:22 发布
阅读量1.1k 收藏
点赞数
分类专栏： jquery 文章标签： jquery ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013562120/article/details/84762186
版权
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
文艺的程序猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQUERY 遮罩层
03-28
除了手动创建遮罩层和弹出框，还有许多现成的 jQuery 插件可供使用，如 jQuery UI、Bootstrap Modal 或者 SweetAlert2。这些插件提供了丰富的自定义选项，如动画效果、关闭按钮、回调函数等。例如，使用 Bootstrap ...
jQuery遮罩层插件
weixin_33725270的博客
06-05 100
在网页上常常遇到须要等待非常久的操作，比方导出报表等。为了预防用户点击其它操作或者多次点击同个功能，须要用遮罩层把页面或者操作区盖住。防止用户进行下一步操作。同一时候能够提高界面友好度，让用户知道操作正在运行。 $.fn.extend({ /** * 给元素加入遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: fu...
Jquery 遮盖层插件 jquery blockui
z69183787的专栏
09-06 1687
http://www.malsup.com/jquery/block/#page
【前端插件】jQuery遮罩层插件Simple Overlay
小拾一的博客
06-01 614
链接：https://pan.baidu.com/s/1jGxxE1f1DeKbEl5oSyFMXQ 密码：p46w 【软件名称】 jQuery遮罩层插件Simple Overlay【软件描述】Simple Overlay 是一个轻量级的jQuery遮罩层插件， 当我们需要遮挡住某个HTML元素或者要吸引用户的注意时就会用到遮罩层。 在学习中有不懂迷茫的童鞋们可以加...
JQuery+JQuery ui实现的弹出窗口+遮罩层+拖动+更改大小～！
zhxzhs的专栏
06-09 8452
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">    无标题页                      function test()    {        alert("调用");    }      $(function(){       
基于jQuery弹出层插件实现的多种不同展开方式的遮罩效果.zip
11-21
本资源"基于jQuery弹出层插件实现的多种不同展开方式的遮罩效果.zip"主要关注的是如何利用jQuery来创建各种弹出层（modal）效果，特别是与遮罩层（mask）相关的视觉效果。遮罩层通常用于在用户界面中突出显示特定...
jQuery实现四种常见简洁遮罩弹出层代码特效.zip
11-19
使用jQuery，可以通过添加和删除CSS类来实现显示和隐藏遮罩层。例如，可以创建一个全局的CSS类`mask`，设置其透明度和全屏覆盖，然后通过`.addClass('mask')`和`.removeClass('mask')`来控制显示和隐藏。 2. **浮动...
jQuery 遮罩层
06-02
除了手动创建遮罩层，还可以使用jQuery插件，如`jquery.modal.js`或`jQuery UI Dialog`等，它们提供了更多的功能和自定义选项，比如拖动、调整大小、自动定位等。 总结，jQuery的遮罩层功能是构建交互式Web应用的...
jquery-ui-1.11.4完整版
04-16
jQuery UI 是一款基于JavaScript库jQuery的用户界面插件集合，提供了丰富的交互效果和可自定义的主题。本文将深入解析jQuery UI 1.11.4这个版本，涵盖其核心功能、组件、应用场景以及使用方法。 一、jQuery UI的...
Jquery简单的弹出层带遮罩插件
09-11
Jquery简单的弹出层带遮罩插件本文由梦三秋于2011年01月07日 23：00作成 jquery代码 $("#test1").click(function(){ $('#login').skygqbox(); }); -------------------------------------------------------------------------------- jquery代码 $("#autoClose").click(function(){ var message = "不好意思呀！我来也匆匆去也匆匆，实在太忙了，有太多的东西要学习了，像Jquery、Jquery插件、Wordpress插件、PHP啦，都要学呀，哥没空老是在这杵着呢!两秒后闪人！别想念哥呀！"; $(message).skygqbox({autoClose:2000}); }); -------------------------------------------------------------------------------- jquery代码 $("#right_top").click(function(){ $('#login').skygqbox({position:"right_top"}); }); -------------------------------------------------------------------------------- jquery代码 $("#right_middle").click(function(){ $('#login').skygqbox({position:"right_middle"}); }); -------------------------------------------------------------------------------- jquery代码 $("#right_bottom").click(function(){ $('#login').skygqbox({position:"right_bottom"}); }); -------------------------------------------------------------------------------- jquery代码 $("#top_middle").click(function(){ $('#login').skygqbox({position:"top_middle"}); }); -------------------------------------------------------------------------------- jquery代码 $("#left_top").click(function(){ $('#login').skygqbox({position:"left_top"}); }); -------------------------------------------------------------------------------- jquery代码 $("#left_middle").click(function(){ $('#login').skygqbox({position:"left_middle"}); }); -------------------------------------------------------------------------------- jquery代码 $("#left_bottom").click(function(){ $('#login').skygqbox({position:"left_bottom"}); }); -------------------------------------------------------------------------------- jquery代码 $("#bottom_middle").click(function(){ $('#login').skygqbox({position:"bottom_middle"}); });
jquery loading（遮罩）插件
07-20
jQuery Loading插件用于当DOM元素加载或变化期间，对其进行遮挡阻止用户操作并告知有些后台任务还在进行。实现“正在加载中…”的效果。整个插件只有1kb左右。效果跟extjs遮罩（锁屏）效果基本一样。
jquery插件thickbox遮罩层的的使用
03-01
NULL 博文链接：https://struts2.iteye.com/blog/277279
遮罩层模态框插件实现思路（jQuery）
weixin_30649641的博客
10-21 123
1.遮罩层使用JS写入，DOM渲染完毕后初始化插件； 2.为实现同一页面多次调用，每次呼出时为遮罩层分配一个ID，模态框内容采用动态写入的方式，关闭模态框时将遮罩层初始化； 3.模态框主要分为三种类型，类alert、类confirm、类prompt（按钮：确定/取消）； 4.在此思路基础上可继续根据模态框内容继续分类，完全格式化模态框； 5.其他参数，例如窗体大小，是否...
jQuary使用多层dialog时的遮罩(lock:true)
lkforce
12-07 2025
当页面打开一个dialog时，如果lock属性为true，jQuery会给页面添加遮罩。 这篇文章讨论的是，dialog如何玩转这个遮罩。   基础知识说明 1，CSS的z-index属性 z-index属性表示了页面元素的堆叠顺序，属性值越高，越会显示的靠前。也就是说，属性值小的元素会被属性值高的元素盖住。 z-index可以是负值。   2，jQuery创建dialog时的lo...
JQuery弹出窗口插件带透明遮罩层
玩火的稻草人的博客
02-07 1726
今天系统中用到了一个带蒙版的弹出窗口，找了一个JQuery的插件，用起来挺方便的，还不错，mark一下，顺便介绍给大家： 直接上代码吧 1、页面HTML文件 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>简单的jQuery弹出层插......
JqueryUI插件dialog实现遮罩的效果
热门推荐
*~~~~~向日葵、的眼里只有【太阳】
03-29 1万+
JqueryUI插件dialog实现遮罩的效果 通过简单的学习了JqueryUI插件的一些内容，对于dialog对话框效果我们也有了一些简单的了解。那么，我来给大家介绍一下使用jqueryUI dialog对话框实现遮罩的效果。 在实现功能之前，我们首先来看一下效果。如下图所示： 我们所谓的遮罩效果，就是当我们点击页面中的一个按钮后，弹出来一个对话框后，就不能再点击页面中的其他内容了
jquery弹窗插件dialog
最新发布
05-20
jQuery弹窗插件Dialog可以让你在网页中轻松创建弹出窗口。它提供了一个简单的API，可以用来创建各种不同类型的弹窗，包括警告、确认和提示框等。 使用Dialog插件非常简单。首先，你需要在HTML页面中引入jQuery和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值