html+css+jQuery通用dialog/popup窗口特效

2024-11-25 19:37:58

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代艨位雅剖码。<div style="width:400px;margin:50px auto;"><h3 style="height:30px;">百度经验百度经验百度经验百度经验</h3><ul> <li><a id="H01" href="#" onmouseover="showHelper('#H01', '帮助主题', '百度经验百度经验百度经验百度经验',30)" onmouseout="$('#_Popup_help').remove()" title="查看帮助">帮助窗口（根据位置自动判断在底下弹出）</a></li> <li><a id="H02" href="#" onmouseover="showHelper('#H02', '帮助主题', '百度经验百度经验百度经验百度经验',30)" onmouseout="$('#_Popup_help').remove()" title="查看帮助">帮助窗口（根据位置自动判断在头部弹出）</a></li></ul><ul> <li><a id="H11" href="javascript:showLoading()" title="查看帮助">百度经验百度经验百度经验百度经验</a>    <a href="javascript:hideTip()">隐藏Loading信息</a></li> <li><a id="H12" href="javascript:showLoading('正在提交数据...')">百度经验百度经验百度经验百度经验</a>    <a href="javascript:hideTip()">隐藏Loading信息</a></li> <li><a id="H13" href="javascript:showLoading('正在加载列表数据...','#H13')">百度经验百度经验百度经验百度经验</a>    <a href="javascript:hideTip()">隐藏Loading信息</a></li> <li><a id="H14" href="javascript:showTip('发表成功，经验 + 5')">百度经验百度经验百度经验百度经验</a>    <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>

4、书写css代码。* { padding: 0; margin: 0; font-size: 12px; }a { color: #333; }ul li { height: 25px; }.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; }.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; }.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; }

5、<script src="js/jquery.min.js"></script><script>(function($) { $.popup = { ID:null, title:"", top:0, left:0, width:0, height:0, popType:"", repositionOnResize:false, okButton:"确定", cancelButton:"取消", isButtonRow:false, isPopup:false, autoClose: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) { 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); $("#_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(); 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 * 1e3); }, _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; $("#_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; } } } }; 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);</script>

6、代码整体结构。

7、查看效果。