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

最新推荐文章于 2022-02-22 15:39:09 发布

未来感知-UWB定位

最新推荐文章于 2022-02-22 15:39:09 发布

阅读量1k

点赞数

分类专栏： js/jquery

js/jquery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

实现弹层最简单的方法，就是定义一个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>

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

收藏、分享这篇文章!

未来感知-UWB定位

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery ui 实现弹层,无遮罩,可拖动,可缩放

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

扫一扫