jquery ui 实现弹层,无遮罩,可拖动,可缩放

来源：互联网发布：数据图表 logo 编辑：程序博客网时间：2024/05/14 18:16

实现弹层最简单的方法，就是定义一个div，加一个绝对定位，宽度，高度，以及层的优先级，就可以实现了。但这样的话，共用就比较麻烦了。以前用过的弹层插件都是有遮罩的，后面的东西没法操作，一点弹层就没有了。google了一下，我擦，jquery的无遮罩弹层插件一个没有找到。没办法，只有利用jquery的ui插件来实现，我想要的功能了。看一下:demo

代码如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">      <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><head profile="http://gmpg.org/xfn/11">      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">            <title> 弹层 无遮罩 可拖动</title>            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>            <body>       <div id="footerpages" title='fuckyou' style='margin-top:200px;margin-left:200px;'>       弹层 无遮罩 可拖动，可缩放，代码统一，可扩展       </div>       <div id='layer' title='弹层 无遮罩'>       <div>输入框：</div><textarea name="params" id="params" cols="6" rows="10" tabindex="2" style="width:200px;height:150px;"></textarea>       </div>             <script type="text/javascript">       $(document).ready(function() {          $('#layer').dialog();          //弹层          $('.ui-dialog').draggable();   //可拖放在总的弹层上。       });       </script>      </body>      </html>

这个方法很简单，并且代码统一，可扩展，好管理。

收藏、分享这篇文章!