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

张映 发表于 2012-12-07

分类目录: nodejs/vue/js/jquery

标签:, , ,

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

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



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/1485.html

1 条评论

  1. 熊猫家族 留言

    不错 收藏啦