基于Jquery的开发个代阴影的对话框效果代码

<script type=”text/javascript” src=”http://img.zzl.com/script/jquery/jquery-1.4.2.min.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#open”).click(function() {
openDialog(a1); //调用,直接写上DIV的ID即可
});
});
var openDialog = function(o) {
var dialog = new zzlDialog(o);
dialog.open();
}
var zzlDialog = function(o) {
this.init = function() {
/* 对话框初始化 */
var XBox = ‘
<div id=”mask”/>
<div id=”wai”>
</div>
<div id=”nie”>
<table>
<thead>
<tr>
<td>
阴影弹出框
</td>
<td>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan=”2″>’ + $(o).html() + ‘
</td>
</tr>
</tbody>
</table>
</div>
‘;
$(document.body).append(XBox);
};
this.cssInit = function() {
/* css初始化 */
$(“#wai”).css({ “padding”: “10px”, “background”: “#000”, “filter”: “Alpha(Opacity=’50’)”, “position”: “absolute” });
$(“#nie”).css({ “position”: “absolute”, “z-index”: “1000” });
$(“#nie>table”).css({ “border”: “1px solid rgb(55,119,188)”, “border-collapse”: “collapse”, “background”: “#fff” });
$(“#nie>table>thead>tr”).css({ “background”: “rgb(0,94,172)”, “color”: “#fff”, “height”: “30px”, “font-size”: “14px”, “font-weight”: “bold” });
$(“#nie>table”).find(“td”).css({ “padding”: “5”});
/* 内部主体定位 */
$(“#nie”).css({ “top”: “50px” });
$(“#nie”).css({ “left”: “50px” });
/* 关闭按钮 */
var $close = $(“#nie>table>thead”).find(“td”).next(“td”);
$close.html(“<span>关闭</span>”);
$close.css({ “text-align”: “right”, “padding-right”: “5px” });
$close.find(“span”).css({ “font-weight”: “normal”, “cursor”: “hand” });
$close.find(“span”).click(function() { new zzlDialog().closes(); });
/* 外部阴影添加 ,及位置和大小由内部内容来控制 */
$(“#wai”).css({ “width”: ($(“#nie>table”).width() + 16) + “px”, “height”: ($(“#nie>table”).height() + 16) + “px” });