JqueryUI插件dialog实现遮罩的成效 _Web前端

JqueryUI插件dialog实现遮罩的效果

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

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

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

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

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

?

?<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.1.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>