基于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" });
$("#wai").css({ "top": $("#nie").position().top - 8 + "px", "left": $("#nie").position().left - 8 + "px", "z-index": $("#nie").css("z-index") });
// $("#wai").corner("5px"); //圆角
};
this.open = function() {
this.init();
this.cssInit();
this.shadow();
};
this.shadow = function() {
this.event_b_show();
if (window.attachEvent) {
window.attachEvent('onresize', this.event_b);
window.attachEvent('onscroll', this.event_b);
}
else {
window.addEventListener('resize', this.event_b, false);
window.addEventListener('scroll', this.event_b, false);
}
};

this.event_b = function() {
var oShadow = $('#mask');
if (oShadow.css("display") != "none") {
if (this.event_b_show) {
this.event_b_show();
}
}
};
this.closes = function() {
var oShadow = $('#mask');
oShadow.css({ 'display': 'none' });
$("#wai").remove();
$("#nie").remove();
};
this.event_b_show = function() {
var oShadow = $('#mask');
oShadow.css({ 'position': 'absolute', 'display': '', 'opacity': '0.1', 'filter': 'alpha(opacity=10)', 'background': '#000' });
var sClientWidth = parent ? parent.document.body.offsetWidth : document.body.offsetWidth;
var sClientHeight = parent ? parent.document.body.offsetHeight : document.body.offsetHeight;
var sScrollTop = parent ? (parent.document.body.scrollTop + parent.document.documentElement.scrollTop) : (document.body.scrollTop + document.documentElement.scrollTop);
oShadow.css({ 'top': '0px', 'left': '0px', 'width': sClientWidth + "px", 'height': (sClientHeight + sScrollTop) + "px" });

(0)

相关推荐

  • jquery ui对话框实例代码

    目前JqueryUI提供的对话框支持使用相对比较的方便,示例代码如下所示: 复制代码 代码如下: <body>    <form id="form1" runat="server"> <div id="dlg"> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </div>

  • jQuery EasyUI API 中文文档 - Dialog对话框

    扩展自 $.fn.window.defaults,用 $.fn.dialog.defaults 重写了 defaults. 依赖 window linkbutton 用法 复制代码 代码如下: <div id="dd" title="My Dialog" style="width:400px;height:200px;"> Dialog Content. </div> 复制代码 代码如下: $('#dd').dialog(

  • jQuery代码实现对话框右上角菜单带关闭×

    先给大家展示下效果图,具体效果图如下所示,如果大家觉得还不错,请参考实现代码: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery对话框右上角带关闭× - 何问起</title><base target="_blank" /> <!-- Attach our CSS -->

  • Jquery实现页面加载时弹出对话框代码

    复制代码 代码如下: <script type="text/javascript" src="jquery-1.4.2.js"></script> //下载 <script type="text/javascript"> $(document).ready(function(){ alert("您好,欢迎来到Jquery!"); }) </script> 将以上代码置于head标

  • jQuery Mobile的loading对话框显示/隐藏方法分享

    显示loading对话框方法是: 复制代码 代码如下: $.mobile.showPageLoadingMsg(); 也可设置参数 复制代码 代码如下: $.mobile.showPageLoadingMsg("b","加载中",false); 隐藏loading对话框方法是: 复制代码 代码如下: $.mobile.hidePageLoadingMsg();

  • JQuery弹出炫丽对话框的同时让背景变灰色

    这段时间在做开发时,用到了JQuery弹出炫丽对话框,背景变灰色.特地和大家分享分享. 先看效果图:  代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src=&q

  • jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答

    插件说明 - jBox 是一款基于 jQuery 的多功能对话框插件,能够实现网站的整体风格效果,给用户一个新的视觉享受. 运行环境 - 兼容 IE6+.Firefox.Chrome.Safari.Opera 等主流浏览器. 使用授权 - jBox 永久免费使用,但是必须保留相关的版权信息.如果有好的建议,可以直接在下面留言. 版本:2.3 大小:19.8k 下载:点击下载 在线demo:http://www.kudystudio.com/jbox/jbox-demo.html [2011-11

  • jQuery Dialog 弹出层对话框插件

    原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为absolute或fixed,使其脱离原来的文档流的位置.再通过适当的加工美化就成了. 复制代码 代码如下: <!-- 背景遮盖层 --> <div class="dialog-overlay"></div> <!-- 对话框 --> <div class="dialog"> <div class

  • jquery 模式对话框终极版实现代码

    页面滚动时随着滚动条固定在屏幕的中央,模式对话框中的内容为两种,一是iframe引入,一是HTML语句插入.在网站开发中十分常用,使用该插件十分的简单.来看一下运行效果.插件使用 1.首先引入样式文件,详细代码如下所示: <link href="images/blue/css.css" rel="stylesheet" type="text/css" id="showdialogcss" /> 着里面的id一定不要

  • jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)

    我们在天猫进行购物的时候,经常会碰到单击删除按钮或者登陆按钮后,弹出对话框问你是否删除或者弹出一个登陆对话框,并且我们也是可以看到我们之前页面的信息,就是点击不了,只有对对话框进行操作后才有相应的变化.截图如下(以天猫为例)  如图所示,上面就是天猫的效果图,其实这就是通过jQuery实现的,并且实现的过程也不是很不复杂,那么现在就让我们来看看实现的过程吧. 首先是页面的布局部分:delete.html 复制代码 代码如下: <!DOCTYPE html> <html> <h

  • Confirmer JQuery确认对话框组件

    插件截图: 用途:点击链接或按钮时要确认是否继续当前操作. 插件代码: 复制代码 代码如下: (function($){ $.fn.confirmer = function(options){ var defaults = { msg:"Are you sure to delete it ?" } var options = $.extend(defaults, options); var control=$(this); $(control).click(function(){ret

  • jQuery UI Dialog 创建友好的弹出对话框实现代码

    主要参数 jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: {"确定":function(){},"取消":function(){}} [{text:"确定", click: function(){}},{text:"取消",click:function(){}}] 3.mod

  • Jquery EasyUI中弹出确认对话框以及加载效果示例代码

    复制代码 代码如下: //confirm function Confirm(msg, control) {    $.messager.confirm("确认", msg, function (r) {        if (r) {            return true;        }    });    return false;} 复制代码 代码如下: //Loadfunction Load() {    $("<div class=\"da

  • jquery删除提示框弹出是否删除对话框

    复制代码 代码如下: /** * 删除草稿 */ function deleteDraft(the,id){ $.messager.confirm('删除草稿提醒', '</br>确定删除这篇草稿吗?</br></br>',function(r){ if(r){ $.ajax({ type : "post", url : "http://localhost:8090/webplus3/_web/sns/delBlog.do?_p=YXM9M

  • 学习从实践开始之jQuery插件开发 对话框插件开发

    前言: 之所以写下这篇文章,是想将我的想法分享给大家:对于初学者,我希望他能从这篇文章中获取对他有用的东西,对于经验丰富的开发者,我希望他能指出我的不足,给我更多的意见和建议:目的就是共同进步. 一.要做什么插件? 我想要实现一个插件可以取代浏览器默认的弹出对话框或窗体,就是我们通过调用window.alert,window.confirm,window.prompt这些方法 所弹出的网页对话框,通过调用window.open,window.showModalDialog,window.show

  • 6款经典实用的jQuery小插件及源码(对话框/提示工具等等)

    jQuery是一款当之无愧的JS开源框架,凭借其小巧实用占领了很大的开发市场,jQuery另外一个优势就是拥有丰富多彩的插件,这些插件可以帮助你简化很多的开发过程.下面介绍的6款实用jQuery小插件及源码,希望大家喜欢. 1.jQuery智能单词提示工具 这是一款可以根据当前输入智能提示单词的插件,效果很棒. 在线演示 /源码下载 2.CSS3实现的Photoshop按钮效果 这是用jQuery和CSS3实现的Photoshop按钮效果. 在线演示 /源码下载 3.jQuery自定义确认对话框

随机推荐