/**
* DialogUpdate
*
* @author huang ji hua
* @copyright Copyright (C) 2012
* @license FreeBSD license
*/
/**
* jQuery的Dialog插件。
*
* @param object content
* @param object options 选项。
* @return
*/
function Dialog(content, options) {
var defaults = { // 默认值。
title: '标题', // 标题文本,若不想显示title请通过CSS设置其display为none
showTitle: true, // 是否显示标题栏。
closeText: '[关闭]', // 关闭按钮文字,若不想显示关闭按钮请通过CSS设置其display为none
draggable: true, // 是否移动
modal: true, // 是否是模态对话框
center: true, // 是否居中。
fixed: true, // 是否跟随页面滚动 true表示不滚动 false滚动。
time: 0, // 自动关闭时间,为0表示不会自动关闭。
id: false, // 对话框的id,若为false,则由系统自动产生一个唯一id。
dialogClass: 'meBan-box w-390', //最外层div样式名称
iframeAttr:'scrolling="no"',//iframe attr
titleClass: ''//标题样式名称
};
var options = $.extend(defaults, options);
options.id = options.id ? options.id : 'dialog-' + Dialog.__count; // 唯一ID
var overlayId = options.id + '-overlay'; // 遮罩层ID
var timeId = null; // 自动关闭计时器
var isShow = false;
var isIe = $.browser.msie;
var isIe6 = $.browser.msie && ('6.0' == $.browser.version);
/* 对话框的布局及标题内容。*/
var barHtml = !options.showTitle ? '' :
'<div class="hd"><b class="'+ options.titleClass +'">' + options.title + '</b> <a href="javascript:void(0)" class="close">' + options.closeText + '</a></div>'
dialog = $('<div id="' + options.id + '" class="' + options.dialogClass + '"><div class="borderg">' + barHtml + '<div class="content"></div></div>').hide();
$('body').append(dialog);
/**
* 重置对话框的位置。
*
* 主要是在需要居中的时候,每次加载完内容,都要重新定位
*
* @return void
*/
var resetPos = function () {
/* 是否需要居中定位,必需在已经知道了dialog元素大小的情况下,才能正确居中,也就是要先设置dialog的内容。 */
if (options.center) {
var left = ($(window).width() - dialog.width()) / 2;
var top = ($(window).height() - dialog.height()) / 2;
if (!isIe6 && options.fixed)
{ dialog.css({ top: top, left: left }); }
else
{ dialog.css({ top: top + $(document).scrollTop(), left: left + $(document).scrollLeft() }); }
}
}
/**
* 初始化位置及一些事件函数。
*
* 其中的this表示Dialog对象而不是init函数。
*/
var init = function () {
/* 是否需要初始化背景遮罩层 */
if (options.modal) {
$('body').append('<div id="' + overlayId + '" class="dialog-overlay"></div>');
$('#' + overlayId).css({ 'left': 0, 'top': 0,
/*'width':$(document).width(),*/
'width': '100%',
/*'height':'100%',*/
'height': $(document).height(),
'z-index': ++Dialog.__zindex,
'position': 'absolute'
})
.hide();
}
dialog.css({ 'z-index': ++Dialog.__zindex, 'position': options.fixed ? 'fixed' : 'absolute' });
/* IE6 兼容fixed代码 */
if (isIe6 && options.fixed) {
dialog.css('position', 'absolute');
resetPos();
var top = parseInt(dialog.css('top')) - $(document).scrollTop();
var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
$(window).scroll(function () {
dialog.css({ 'top': $(document).scrollTop() + top, 'left': $(document).scrollLeft() + left });
});
}
/* 以下代码处理框体是否可以移动 */
var mouse = { x: 0, y: 0 };
function moveDialog(event) {
var e = window.event || event;
var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);
var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
dialog.css({ top: top, left: left });
mouse.x = e.clientX;
mouse.y = e.clientY;
};
dialog.find('.hd').mousedown(function (event) {
if (!options.draggable) { return; }
var e = window.event || event;
mouse.x = e.clientX;
mouse.y = e.clientY;
$(document).bind('mousemove', moveDialog);
});
$(document).mouseup(function (event) {
$(document).unbind('mousemove', moveDialog);
});
/* 绑定一些相关事件。 */
dialog.find('.close').bind('click', this.close);
dialog.bind('mousedown', function () { dialog.css('z-index', ++Dialog.__zindex); });
// 自动关闭
if (0 != options.time) { timeId = setTimeout(this.close, options.time); }
}
/**
* 设置对话框的内容。
*
* @param string c 可以是HTML文本。
* @return void
*/
this.setContent = function (c) {
var div = dialog.find('.content');
if ('object' == typeof (c)) {
switch (c.type.toLowerCase()) {
case 'id': // 将ID的内容复制过来,原来的还在。
div.html($('#' + c.value).html());
break;
case 'img':
div.html('加载中...');
$('<img alt="" />').load(function () { div.empty().append($(this)); resetPos(); })
.attr('src', c.value);
break;
case 'url':
div.html('加载中...');
$.ajax({ url: c.value,
success: function (html) { div.html(html); resetPos(); },
error: function (xml, textStatus, error) { div.html('出错啦') }
});
break;
case 'iframe':
div.append($('<iframe src="' + c.value + '" ' + options.iframeAttr + '/>'));
break;
case 'text': break;
default:
div.html(c.value);
break;
}
}
else
{ div.html(c); }
}
/**
* 显示对话框
*/
this.show = function () {
if (undefined != options.beforeShow && !options.beforeShow())
{ return; }
/**
* 获得某一元素的透明度。IE从滤境中获得。
*
* @return float
*/
var getOpacity = function (id) {
if (!isIe)
{ return $('#' + id).css('opacity'); }
var el = document.getElementById(id);
return (undefined != el
&& undefined != el.filters
&& undefined != el.filters.alpha
&& undefined != el.filters.alpha.opacity)
? el.filters.alpha.opacity / 100 : 1;
}
/* 是否显示背景遮罩层 */
if (options.modal)
{ $('#' + overlayId).fadeTo('slow', getOpacity(overlayId)); }
dialog.fadeTo('slow', getOpacity(options.id), function () {
if (undefined != options.afterShow) { options.afterShow(); }
isShow = true;
});
// 自动关闭
if (0 != options.time) { timeId = setTimeout(this.close, options.time); }
resetPos();
}
/**
* 隐藏对话框。但并不取消窗口内容。
*/
this.hide = function () {
if (!isShow) { return; }
if (undefined != options.beforeHide && !options.beforeHide())
{ return; }
dialog.fadeOut('slow', function () {
if (undefined != options.afterHide) { options.afterHide(); }
});
if (options.modal)
{ $('#' + overlayId).fadeOut('slow'); }
isShow = false;
}
/**
* 关闭对话框
*
* @return void
*/
this.close = function () {
if (undefined != options.beforeClose && !options.beforeClose())
{ return; }
dialog.fadeOut('slow', function () {
$(this).remove();
isShow = false;
if (undefined != options.afterClose) { options.afterClose(); }
});
if (options.modal)
{ $('#' + overlayId).fadeOut('slow', function () { $(this).remove(); }); }
clearTimeout(timeId);
}
init.call(this);
this.setContent(content);
Dialog.__count++;
Dialog.__zindex++;
}
Dialog.__zindex = 500;
Dialog.__count = 1;
Dialog.version = '1.0 beta';
function dialog(content, options) {
var dlg = new Dialog(content, options);
dlg.show();
return dlg;
}
//调用方式:
new Dialog({type:'url',value:'/dialog/videoplayer/"+shlf.InnerCode +"'},{title:'标题',closeText:'',dialogClass:'meBan-box w-670'}).show()
分享到:
相关推荐
jQuery对话框Dialog弹出层插件演示与使用说明
Dialog基于jQuery弹出层对话框插件.zip
一些简单的弹框、弹出层插件、jquery.dialogBox
简单的jquery dialog实现插件,使用简单,自行修改样式
4.jQueryUI Dialog 官方网站:http://jqueryui.com/demos/dialog/ 下载地址:http://jqueryui.com/demos/dialog/ 演示实例:http://jqueryui.com/demos/dialog/ 5.DOM window 官方网站:...
NULL 博文链接:https://lishuaishuai.iteye.com/blog/1267230
jQuery Dialog弹出层对话框插件演示,简单的那种,看上去比较不错,下面说一下用法: 基本操作 默认的 new Dialog(‘这是一个默认对话框‘).show(); 非模态对话框 new Dialog(‘非模态对话框,可以打开多个.,{modal...
通用jQuery对话框dialog或popup弹出层或提示窗口插件
Dialog弹出层Jquery插件多种效果版
jQuery 通用dialog/popup弹出层,提示窗口插件,包括有弹出自定义的帮助窗口(根据位置自动判断在底部或头部弹出)、显示和隐藏Loading信息、显示自定义Loading信息、在指定容器内显示Loading信息、显示和隐藏Tip信息...
Zebra_Dialog是一个可灵活配置的遮罩对话框jQuery插件,大小只有4KB,要求jQuery 1.5.2 支持。可用于替换JavaScript原始的“alert” 和“confirmation”对话框。这个插件使用jQuery Plugin Boilerplate构建。
在网上找的比较不错的弹出层。 实例有: 可以打开多个; 自动关闭; 非fixed模式(对话框不随滚动条移动); 显示指定ID的内容; 加载一张图片; 加载一URL地址; 加载一URL到iframe; 回调函数。
前几天我们刚刚分享过一款带遮罩的jQuery弹出层对话框,非常实用。今天我们要再介绍一款扁平化风格的jQuery对话框插件Dialogbox,Dialogbox同样有多重对话框类型,包括提示框、确认框、带选择的提示框等,是一款很...
网上这种插件很多,但是没一个合适的,大部分都做得很大,功能齐全。于是自己做了这个小插件,顺便学习下jQuery插件的写法。
jquery.dialog.js 是jquery 最经典的弹出框插件,简单易用,亲测可用,附案例代码
摘要:脚本资源,Ajax/JavaScript,弹出窗口,浮动层 jquery Dialog 弹出窗口,网页弹出框插件,一款网页浮动层效果,加载的比较慢,调用了远程的CSS资源,请耐心等待加载完毕。 如上图所示,当加载完毕后,点击...
在使用discuzx中有一个Message以及Dialog方法来显示信息对话框。今天写项目的时候,需要一个信息对话框,所以就着手利用lightbox_me插件来写一个做备用。
内容索引:脚本资源,jQuery,提示框,弹出层 jQuery 通用dialog/popup弹出层,提示窗口插件,包括有弹出自定义的帮助窗口(根据位置自动判断在底部或头部弹出)、显示和隐藏Loading信息、显示自定义Loading信息、在...
jquery modal dialog对话框窗口插件制作遮罩弹出层登录注册表单代码