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