JqueryUI插件dialog实现遮罩的效果

原创 2012年03月29日 20:28:34

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>


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

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>


 

以上的代码,我们就能很好的实现一个简单的对话框的这招效果了!你学会了没?

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jQuery UI dialog实现dialog弹框显示

实现弹框,比较精美的jQuery.ui.*;来实现,弹框显示:       jsp页面代码[jqueryuidialog.jsp]: ...

jQuery UI全教程之一(dialog的使用教程)

jQuery UI目前的版本已经更新到了1.8.7。个人感觉和easyui相比起来,jQuery UI在界面的美观程度和可定制型更强一些。所以再次将一些jQuery UI组件的用法说明一下,方便日后查...

jQuery UI库使用记录----dialog以及以下effects效果

jQuery的UI库中的dialog效果很不错,在这里记录一下简单的一些使用方式以及一些配置的参数意义: 简单的使用可以在jQuery UI的官方demo中看到,具体的使用方式如下: ...

JQuery+JQuery ui实现的弹出窗口+遮罩层+拖动+更改大小~!

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     无标题...

Dialog弹出后显示遮罩效果

在很多APP中经常见到打开一个弹框后整个屏幕的背景颜色变深了,那么这种效果怎么实现呢?/** * 设置背景透明度 * * @param bgAlpha */ ...

使用jQuery插件实现 模拟dialog的遮罩效果

无标题文档 $(function (){ $("#dialog").dialog({ autoOpen:false, //设置对话框的打开方式 不是自动打开 show:"bli...
  • HUMHSX
  • HUMHSX
  • 2012年03月28日 19:30
  • 2938

easyUI(三) -- Dialog的控制及遮罩层

Dialog 的使用在官方文档中可以直接Copy , 我们主要介绍一下 easyui Dialog 的开启关闭和弹出即遮罩 , 使其他页面变为不可操作状态 Dialog的开关有两种操作方法 1.使...
  • JacXuan
  • JacXuan
  • 2017年03月26日 22:11
  • 11562

jquery 半透明遮罩效果

首先谈谈最简单的实现方式吧。准备两个div,一个是幕布,另一个是要显示在屏幕正中央的部件,content 里面要显示什么东东,就由你自己去定义了。可以是图片,也可以是图表、视频什么的。然后就是添加效果...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JqueryUI插件dialog实现遮罩的效果
举报原因:
原因补充:

(最多只允许输入30个字)