JqueryUI插件dialog实现遮罩的效果

JqueryUI插件dialog实现遮罩的效果

通过简单的学习了JqueryUI插件的一些内容,对于dialog对话框效果我们也有了一些简单的了解。那么,我来给大家介绍一下使用jqueryUI dialog对话框实现遮罩的效果。

在实现功能之前,我们首先来看一下效果。如下图所示:

 

我们所谓的遮罩效果,就是当我们点击页面中的一个按钮后,弹出来一个对话框后,就不能再点击页面中的其他内容了。正如图所示,本身的页面已经变为浅灰色的了。

下面我们就来具体看一下遮罩效果具体实现的代码分析。

1、  首先,我们要新建一个JSP页面,在JSP页面中要引入相应的jQueryUI插件以及相应的CSS样式文件。如下:

 

rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">

 

type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js">

2、 我们要实现页面显示的效果。代码如下:

[html] view plain copy print ?
  1. <body>  
  2.   
  3.     <h1>对话框的遮罩效果h1>  
  4.   
  5.       <a href="#" id="dialo" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin">span>Open Dialoga>  
  6.   
  7.     <div id="dialog" title="Dialog Title">  
  8.   
  9.            <p>你好啊!你已经实现了遮罩的效果!p>  
  10.   
  11.        div>  
  12.   
  13. body>  


    

对话框的遮罩效果

Open Dialog

你好啊!你已经实现了遮罩的效果!


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

3、 下面我们就来实现这个遮罩效果的代码了。

[javascript] view plain copy print ?
  1. "text/javascript">  
  2.   
  3.  $(document).ready(function(){  
  4.   
  5.        $("#dialo").click(function(){  
  6.   
  7.            $("#dialog").dialog("open")  
  8.   
  9.            return false;  
  10.   
  11.        });  
  12.   
  13.        $("#dialog").dialog({  
  14.   
  15.            autoOpen:false,  
  16.   
  17.            width:600,//宽度   
  18.   
  19.            buttons:{  
  20.   
  21.               "取消":function(){  
  22.   
  23.                   $(this).dialog("close")  
  24.   
  25.               }  
  26.   
  27.            },  
  28.   
  29.            bgiframe:false,  
  30.   
  31.            closeOnEscape:false,//按esc退出默认的true   
  32.   
  33.            draggable:false//拖拽默认是true   
  34.   
  35.            hide:"toggle",//关闭窗口的效果   
  36.   
  37.            modal:true//遮罩效果默认是false不遮住   
  38.   
  39.            position:"center"//对话框弹出的位置,top,left,right,center,默认是center   
  40.   
  41.            show:"slide",//打开窗口的效果   
  42.   
  43.            title:"对话框遮罩效果的实现"//设置对话框的标题   
  44.   
  45.              
  46.   
  47.        });  
  48.   
  49.          
  50.   
  51.     });  
  52.   
  53.    


 

你可能感兴趣的:(JqueryUI插件dialog实现遮罩的效果)