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
分享到：
相关推荐
标题《jquery弹出框插件jquery.ui.dialog用法分析》及描述《主要介绍了jquery弹出框插件jquery.ui.dialog用法,结合实例形式分析了弹出框插件jquery.ui.dialog的功能、下载、使用方法与相关注意事项,需要的朋友可以...
除了手动创建遮罩层和弹出框，还有许多现成的 jQuery 插件可供使用，如 jQuery UI、Bootstrap Modal 或者 SweetAlert2。这些插件提供了丰富的自定义选项，如动画效果、关闭按钮、回调函数等。例如，使用 Bootstrap ...
jQuery UI 是一款基于JavaScript库jQuery的用户界面插件集合，提供了丰富的交互效果和可自定义的主题。本文将深入解析jQuery UI 1.11.4这个版本，涵盖其核心功能、组件、应用场景以及使用方法。 一、jQuery UI的...
在原生confirm对话框可能被浏览器屏蔽的情况下，使用jQuery UI的dialog组件可以实现更加丰富和可控的对话框效果。 2. 实现对话框替代confirm的方法 通过在HTML中定义一个div元素，为其添加id属性，例如"confirm_...
本资源"基于jQuery弹出层插件实现的多种不同展开方式的遮罩效果.zip"主要关注的是如何利用jQuery来创建各种弹出层（modal）效果，特别是与遮罩层（mask）相关的视觉效果。遮罩层通常用于在用户界面中突出显示特定...
要使用`jQuery UI`的`dialog`来实现遮罩层效果，首先需要在项目中引入`jQuery`和`jQuery UI`的CSS和JS文件。你可以在官方网站上下载最新版本的库，或者通过CDN链接直接引用： ```html <!-- 引入jQuery --> ...
Overlay组件为页面添加半透明的遮罩层，通常与Dialog或其他元素配合使用，以突出显示某个部分或阻止用户在后台进行其他操作。它可以根据需求调整透明度和尺寸，为用户提供沉浸式体验。 5. **Slider（滑块）**： ...
jQuery UI 是一个基于 jQuery 库的用户界面交互框架，它提供了丰富的组件，帮助开发者实现复杂的交互和视觉效果，而无需依赖第三方插件。本篇文章主要关注于jQuery UI的实战应用，特别是常用功能的实现。 首先，...
本文主要介绍 jQuery 中的一个实用功能——遮罩层（Mask Layer），特别关注 `dialog` 功能的应用。`dialog` 作为 jQuery UI 中一个强大的组件，可以用来创建弹出对话框或模态窗口，广泛应用于网页开发中。 #### 二...
使用jQuery，可以通过添加和删除CSS类来实现显示和隐藏遮罩层。例如，可以创建一个全局的CSS类`mask`，设置其透明度和全屏覆盖，然后通过`.addClass('mask')`和`.removeClass('mask')`来控制显示和隐藏。 2. **浮动...
除了手动创建遮罩层，还可以使用jQuery插件，如`jquery.modal.js`或`jQuery UI Dialog`等，它们提供了更多的功能和自定义选项，比如拖动、调整大小、自动定位等。 总结，jQuery的遮罩层功能是构建交互式Web应用的...
除了BlockUI，还有其他jQuery遮罩插件可供选择，如`jQuery Masked Input Plugin`，主要用于输入框的格式化，不适用于全局遮罩，或者`jQuery UI Dialog`，可以创建弹出对话框并带有遮罩效果。 ### 七、总结 jQuery...
jQuery提供了一些插件，如jQuery UI的Dialog或者Bootstrap的Modal，来方便地创建弹出层。 1. jQuery UI Dialog： jQuery UI的Dialog组件可以将任何HTML元素转化为一个具有可定制标题、按钮和关闭功能的弹出窗口。...
<title>jQuery UI - 弹出层应用实例 Dialog [jQuery UI CSS 文件路径]" /> [jQuery JS 文件路径]"> [jQuery UI JS 文件路径]"> <div id="dialog" title="基本对话框"> 这是一个基本的对话框示例。 $...
标题“jquery弹出层原来的层不能编辑”涉及到一个常见的问题，即在使用jQuery实现弹出层（通常为对话框或模态窗口）时，背景层（通常称为“遮罩层”）阻止用户对页面原有元素进行交互。 当我们创建一个弹出层时，...
6. **jQuery UI Dialog**：jQuery UI库中的Dialog组件提供了丰富的交互式弹出层功能，包括拖动、缩放、自动调整大小等。它可以作为模态或非模态对话框使用，支持多种主题和自定义配置。 7. **Magnific Popup**：...
第一种插件可能是一个轻量级的解决方案，例如jQuery UI的Dialog组件。jQuery UI是一个强大的前端库，提供了丰富的UI组件，Dialog是其中用于创建弹出窗口的一个组件。使用Dialog，只需要引用jQuery和jQuery UI的库，...
此外，还可以使用现成的jQuery插件，如jQuery UI的Dialog组件，它提供了更多的配置选项和预设样式，使得实现更加简便。 总之，使用jQuery实现的仿div透明模态弹出窗是网页动态效果的一种常见应用，它能够增强用户...
JQuery本身并不直接包含创建模式窗口的功能，但可以通过插件如jQuery UI或自定义脚本来实现。例如，`weebox`可能是一个jQuery模式窗口插件的名称，它提供了创建和操作模式窗口的功能。 1. jQuery UI：jQuery UI是一...