jQuery通用dialog_popup窗口插件特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery通用dialog_popup窗口插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery通用dialog/popup窗口插件，属于站长常用代码" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lanrentuku.js"></script>
<link href="css/Popup.css" rel="stylesheet" type="text/css" />
<title>jQuery通用dialog/popup窗口插件</title>
</head>
<body>

<div style="width:400px;margin:50px auto;">
<h3 style="height:30px;">jQuery通用dialog/popup窗口插件</h3>
  <ul>
    <li><a id="H01" href="#" onmouseover="showHelper('#H01', '帮助主题', '多个TAG标签用半角逗号隔开 程序员设计师联盟淘宝店 13141618.taobao.com',30)" onmouseout="$('#_Popup_help').remove()" title="查看帮助">帮助窗口（根据位置自动判断在底下弹出）</a></li>
    <li><a id="H02" href="#" onmouseover="showHelper('#H02', '帮助主题', '多个TAG标签用半角逗号隔开',30)" onmouseout="$('#_Popup_help').remove()" title="查看帮助">帮助窗口（根据位置自动判断在头部弹出）</a></li>
  </ul>
  <ul>
    <li><a id="H11" href="javascript:showLoading()" title="查看帮助">显示Loading信息（默认）</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:hideTip()">隐藏Loading信息</a></li>
    <li><a id="H12" href="javascript:showLoading('正在提交数据...')">显示自定义Loading信息（默认）</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:hideTip()">隐藏Loading信息</a></li>
    <li><a id="H13" href="javascript:showLoading('正在加载列表数据...','#H13')">在指定容器内显示Loading信息（默认）</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:hideTip()">隐藏Loading信息</a></li>
    <li><a id="H14" href="javascript:showTip('发表成功，经验 + 5')">显示提示信息</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:hideTip()">隐藏Tip信息</a></li>
    <li><a id="H15" href="javascript:showTip('回复成功，经验 + 1',null,1)">显示提示信息（自动隐藏）</a></li>
  </ul>
  <ul>
    <li><a id="H21" href="javascript:showPrompt('#H21', '对话框', '自定义显示内容','callback')" title="查看帮助">对话框</a></li>
  </ul>        
</div>
<p align="center"><br /><br />
</p>
<p align="center"><p>jQuery通用dialog/popup窗口插件</p><br /><br />
</p>
<p align="center"><br /><br />
</p>
</body>
</html>

JS代码(lanrentuku.js):

// jQuery Dialogs Plugin// Version 1.1// Cory S.N. LaViska (http://abeautifulsite.net/)// Edit by LinPanxing (http://www.91aspx.com/)// Download by http://sc.xueit.com(function($){
	$.popup ={
	ID:null,title:"",top:0,left:0,width:0,height:0,popType:"",repositionOnResize:false,// 窗口调整大小后是否重新定位 okButton:'确 定',// 确定按钮 cancelButton:'取 消',// 取消按钮 isButtonRow:false,// 是否显示按钮 isPopup:false,// 是否为popup窗口 autoClose:0,// 窗口自动关闭 (大于0时窗口自动关闭) // 公共方法 tip:function(msg,top,left,autoClose){
	this.ID = 'tip';
	this.popType = 'tip';
	this.title = '';
	this.isPopup = false;
	this.autoClose = autoClose || 0;
	this.width = 240;
	this.height = 30;
	this.top = top || ($(document).height() - this.height) / 2;
	this.left = left || ($(document).width() - this.width) / 2;
	$.popup._show(null,msg,null);
}
,help:function(elem,title,msg,height){
	this.ID = 'help';
	this.title = title || this.title;
	this.width = 271;
	this.height = height || 40;
	var top = $(elem).offset().top;
	if (top - 60 - this.height > 0){
	this.top = $(elem).offset().top - 60 - this.height;
	this.popType = 'help_up';
}
else{
	this.top = top + 16;
	this.popType = 'help_down';
}
this.left = $(elem).offset().left - 30;
	$.popup._show(elem,msg);
}
,prompt:function(elem,title,msg,isButtonRow,isPopup,callback,top,left,width,height){
	this.ID = 'prompt';
	this.title = title || this.title;
	this.popType = 'prompt';
	this.isButtonRow = isButtonRow || this.isButtonRow;
	this.isPopup = isPopup || this.isPopup;
	this.top = top || $(elem).offset().top + 16;
	this.left = left || $(elem).offset().left;
	this.width = width || 300;
	this.height = height || 120;
	$.popup._show(elem,msg,function(result){
	if (callback) callback(result);
}
);
}
,// 私有方法 _show:function(elem,msg,callback){
	if ($("#_Popup_" + this.ID).length < 1){
	//$.popup._hide();
	var html = '<div class="popup_' + this.popType + '" id="_Popup_' + this.ID + '" style="width:' + this.width + 'px">\ <div class="popup_header" id="_Title_"><h1>' + this.title + '</h1><div class="h_r"></div></div>\ <div class="popup_content">\ <div id="_Container_' + this.ID + (this.height == 0 ? '">':'" style="height:' + this.height + 'px">') + msg + '</div></div>' + (this.isButtonRow ? '<div class="buttonRow" id="_ButtonRow_' + this.ID + '"></div>':'') + '<div class="popup_bottom"><div class="b_r"></div>\ </div>';
	$("BODY").append(html);
	// IE6 Fix //var pos = ($.browser.msie && parseInt($.browser.version) <= 6) ? 'absolute':'fixed';
	$("#_Popup_" + this.ID).css({
	position:'absolute',zIndex:100,padding:0,margin:0}
);
	$("#_Popup_" + this.ID).css({
	minWidth:$("#_Popup_" + this.ID).outerWidth(),maxWidth:$("#_Popup_" + this.ID).outerWidth()}
);
	$.popup._reposition();
	$.popup._maintainPosition(true);
	$.popup._bindType();
	// Popup 窗口方法待测试 if (this.isPopup){
	$(elem).click(function(e){
	e ? e.stopPropagation():event.cancelBubble = true;
}
);
	$("#_Popup_" + this.ID).click(function(e){
	e ? e.stopPropagation():event.cancelBubble = true;
}
);
	$(document).click(function(){
	$.popup._hide();
}
);
}
if (this.autoClose > 0){
	$.popup._autoClose();
}
}
else{
	$("#_Container_" + this.ID).html(msg);
	$.popup._bindType(callback);
	$.popup._reposition();
	$.popup._maintainPosition(true);
	$("#_Popup_" + this.ID).show();
	if (this.autoClose > 0){
	$.popup._autoClose();
}
}
}
,_bindType:function(callback){
	switch (this.popType){
	case 'help':if (this.isButtonRow){
	$("#_ButtonRow_" + this.ID).after('<input type="button" value="' + $.popup.okButton + '" id="_ButtonOK_' + this.ID + '" />');
	$("#_ButtonOK_" + this.ID).click(function(){
	$.popup._hide();
	callback(true);
}
);
	$("#_ButtonOK_" + this.ID).keypress(function(e){
	if (e.keyCode == 13 || e.keyCode == 27) $("#_ButtonOK_" + this.ID).trigger('click');
}
);
}
break;
	case 'prompt':if (this.isButtonRow){
	$("#_ButtonRow_" + this.ID).html('<input type="hidden" id="hid_' + this.ID + '" />\ <input type="button" value="' + $.popup.okButton + '" id="_ButtonOK_' + this.ID + '"/>\ <input type="button" value="' + $.popup.cancelButton + '" id="_ButtonCancel_' + this.ID + '"/>');
	$("#_ButtonOK_" + this.ID).click(function(){
	var val = $("#hid_" + this.ID).val();
	$.popup._hide();
	if (callback) callback(val);
}
);
	$("#_ButtonCancel_" + this.ID).click(function(){
	$.popup._hide();
	if (callback) callback(null);
}
);
	$("#_ButtonOK_" + this.ID + ",#_ButtonCancel_" + this.ID).keypress(function(e){
	if (e.keyCode == 13) $("#_ButtonOK_" + this.ID).trigger('click');
	if (e.keyCode == 27) $("#_ButtonCancel_" + this.ID).trigger('click');
}
);
}
break;
	case 'tip':break;
	default:break;
}
}
,_hide:function(){
	if ($("#_Popup_" + this.ID).length > 0){
	if (this.popType == "tip"){
	$("#_Popup_" + this.ID).fadeOut(500);
}
else{
	$("#_Popup_" + this.ID).remove();
}
$.popup._maintainPosition(false);
}
}
,_autoClose:function(){
	setTimeout("$.popup._hide()",this.autoClose * 1000);
}
,_reposition:function(){
	var top = this.top || (($(document).height() / 2) - ($("#popup_container").outerHeight() / 2));
	var left = this.left || (($(document).width() / 2) - ($("#popup_container").outerWidth() / 2));
	if (top < 0) top = 0;
	if (left < 0) left = 0;
	// IE6 fix //if ($.browser.msie && parseInt($.browser.version) <= 6) top = top + $(window).scrollTop();
	$("#_Popup_" + this.ID).css({
	top:top + 'px',left:left + 'px'}
);
}
,_maintainPosition:function(status){
	if ($.popup.repositionOnResize){
	switch (status){
	case true:$(window).bind('resize',$.popup._reposition);
	break;
	case false:$(window).unbind('resize',$.popup._reposition);
	break;
}
}
}
}
// 显示Loading信息 showLoading = function(msg,elem){
	var loadingMsg = msg || '正在加载数据，请稍候...';
	if (elem == null){
	$.popup.tip('<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' + '<td align="center"><img src="images/loading.gif" /> ' + loadingMsg + '</td></tr></table>',null,null,0);
}
else{
	var middle = ($(elem).height() - 30) / 2;
	var top = $(elem).offset().top + (middle > 0 ? middle:0);
	$.popup.tip('<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' + '<td align="center"><img src="images/loading.gif" /> ' + loadingMsg + '</td></tr></table>',top,null,0);
}
}
hideTip = function(){
	$("#_Popup_tip").fadeOut(500);
}
showTip = function(msg,elem,autoClose){
	if (elem == null){
	$.popup.tip('<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' + '<td align="center">' + msg + '</td></tr></table>',null,null,autoClose);
}
else{
	var middle = ($("#" + elem).height() - 50) / 2;
	var top = $("#" + elem).offset().top + (middle > 0 ? middle:0);
	$.popup.tip('<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' + '<td align="center">' + msg + '</td></tr></table>',top,null,autoClose);
}
}
showHelper = function(elem,title,msg,height){
	$.popup.help(elem,title,msg,height);
}
showPrompt = function(elem,title,msg,isButtonRow,isPopup,callback,top,left,width,height){
	$.popup.prompt(elem,title,msg,isButtonRow,isPopup,callback,top,left,width,height);
}
}
)(jQuery);

CSS代码(Popup.css):

*{padding:0;margin:0;font-size:12px;}
a{color:#333;}
ul li{height:25px;}
/*------- Prompt Style -------*/
.popup_prompt{border:1px solid #909090;background:#FFF;}
.popup_prompt .popup_header{}
.popup_prompt h1{height:25px;margin:1px;font-size:13px;color:#F4793A;font-weight:bold;text-indent:10px;padding-top:7px;}
.popup_prompt .popup_content{margin:1px;padding:10px;font-size:13px;}
.popup_prompt .buttonRow{height:30px;line-height:30px;text-align:right;margin:1px;}
.popup_prompt input{color:#555;border:1px solid #808080;margin-right:5px;height:20px;line-height:18px;padding:0px 3px;}
/*------- Tip Style -------*/
.popup_tip{border:1px #684E02 solid;vertical-align:middle;filter:Alpha(Opacity=80);-moz-opacity:0.8;}
.popup_tip .popup_content{color:#000;background:#FCFBE0;text-align:center;}
.popup_tip img{vertical-align:middle;}
/*------- Help Style -------*/
.popup_help_up,.popup_help_down{width:271px;filter:Alpha(Opacity=85);}
.popup_help_up{background:url(../images/help_t1.gif) left top no-repeat;}
.popup_help_down{background:url(../images/help_t2.gif) left top no-repeat;}
.popup_help_up a:link,.popup_help_down a:link{text-decoration:underline;}
.popup_help_up .popup_header{margin-top:9px;}
.popup_help_down .popup_header{margin-top:22px;}
.popup_help_up .popup_header,.popup_help_down .popup_header{height:18px;border-left:1px #000 solid;border-right:1px #000 solid;background:#FFFFE1;}
.popup_help_up .popup_header h1,.popup_help_down .popup_header h1{font-size:13px;text-indent:28px;background:url(../images/action.gif) 10px 0px no-repeat;}
.popup_help_up .popup_content,.popup_help_down .popup_content{line-height:16px;padding:5px 10px;border-left:1px #000 solid;border-right:1px #000 solid;background:#FFFFE1;}
.popup_help_up .popup_bottom{height:22px;background:url(../images/help_b1.gif) left top no-repeat;}
.popup_help_down .popup_bottom{height:9px;background:url(../images/help_b2.gif) left top no-repeat;}

附件:下载该文件资源,减少时间成本(增值服务)