jQuery封装JS弹层--[转]
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>
<title>simple js dialog demo</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
#main { height: 2000px;}
.switch { width: 80px; height: 50px; text-align: center; line-height: 50px; background: #6AB5FF; position: fixed; bottom: 5px; right: 5px; float: right;}
.dialog { width: 200px; height: 100px; border: 10px solid #cccccc; background: white; }
.dialog p { padding: 10px; }
</style>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jq-dialog.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<div class="switch"><a id="show" style="display: block; cursor: hand;">显示</a></div>
<div id="dialog" class="dialog" style="display: none;">
<div style=" width: 100%; height: 20px; line-height: 20px; text-align: right;">
<a id="hide" style="cursor: hand; font: bold 14px Arial; color: #aaa;">Close</a>
</div>
<p>这是一个层窗口示例程序. </p>
</div>
</div>
<script type="text/javascript">
(function() {
$("#show").click(function() {
//参数(层id, {遮罩颜色,显示延时,透明度}, 回调函数)
showDialog("#dialog", { "bgcolor": "black", "delay": 200 }, function() {
alert("Dialog was shaw!");
});
});
$("#hide").click(function() {
//参数(层id, 回调函数)
hideDialog("#dialog", function() {
alert("Dialog was hided!");
});
})
})();
</script>
</body>
</html>
单层脚本, jQuery用1.4.4版本的, 自己下
View Code
//************************************
// A simple js dialog based on jQuery
// Present by Shalves.Y 2011.7.17
//************************************
function showDialog(e, m, fn) {
var wh = $(window).height();
var t = $(e).css({ "z-index": 1002, "position": "fixed"});
repositionDialog(t);
$(window).resize(function() {
repositionDialog(t);
});
if ($.browser.msie && $.browser.version == "6.0") {
t.css("position", "absolute");
$(window).scroll(function() {
var d = $(document).scrollTop(), dh = $(document).height(), wh = $(window).height(), oh = t.outerHeight();
var p = d + wh / 2 - oh / 2;
if (d == 0 && oh > wh) p = 0; else if (d + oh >= dh) p = dh - oh;
t.css("top", p);
});
}
showMask(m, function() { t.fadeIn(m && m.delay ? m.delay : 150, fn); }).dblclick(function() {
hideDialog(e);
});
}
function showMask(s, fn) {
var c = { "opacity": 0.3, "bgcolor": "black", "delay": 150 };
if (s) {
if (s.opacity) c.opacity = s.opacity;
if (s.bgcolor) c.bgcolor = s.bgcolor;
if (s.delay) c.delay = s.delay;
}
if (!document.getElementById("maskDiv")) {
var maskDiv = "<div id='maskDiv' style='display: none; width: 100%; height: " + $(document).height() + "px; ";
maskDiv += "position: absolute; top: 0; left: 0; z-index: 1001; background-color: " + c.bgcolor + "; "
maskDiv += "-moz-opacity: " + c.opacity + "; opacity: " + c.opacity + "; filter: alpha(opacity=" + c.opacity * 100 + ");'></div>";
$("body").append(maskDiv);
}
return $("#maskDiv").fadeIn(c.delay, fn);
}
function repositionDialog(t) {
t.css({
"top": $(window).height() / 2 - t.outerHeight() / 2,
"left": $(window).width() / 2 - t.outerWidth() / 2
});
}
function hideDialog(e, fn) {
$(e).fadeOut(150, function() {
$("#maskDiv").fadeOut(150, function() {
$(this).remove();
if (typeof (fn)=="function") fn();
});
});
}
浙公网安备 33010602011771号
【推荐】100%开源！大型工业跨平台软件C++源码提供，建模，组态！
【推荐】AI 的力量，开发者的翅膀：欢迎使用 AI 原生开发工具 TRAE
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动，百万大奖等你挑战
· 当加密ID需要变成Guid：为什么我选择了AES-CBC而非GCM？
· 基于 epoll 的协程调度器——零基础深入浅出 C++20 协程
· 下划线字段在golang结构体中的应用
· SQL Server也能玩正则表达式？
· CUDA 编程初探
· 家里有密码锁的注意了，这真不是 BUG，是 feature。
· C#实现屏幕墙：同时监控多个电脑桌面（支持Windows、信创Linux、银河麒麟、统信UOS）
· 直击痛点的开源项目「GitHub 热点速览」
· C# 13 与 .NET 9 跨平台开发实战（第一章：开发环境搭建与.NET概述-上篇）
· 记一次 .NET 某自动化智能制造软件 卡死分析