自定义浏览器弹窗
2016-02-21 23:23
232 查看
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
* { margin:0px;padding:0px; }
a{ text-decoration:none}
.testDiv a { display:block; margin:20px;}
.myShade { position: absolute;top: 0;left: 0;width: 100%;opacity:0.10;filter:alpha(opacity=10);background-color: grey;display: none;cursor:pointer;}
.alertDiv,.promptDiv,.confirmDiv { position:absolute;width:400px;height:150px;background-color: white;border: 2px solid #fd8a03;border-radius: 5px;}
.promptDiv { height:200px;}
.btnPopup {position: absolute;/*top: 125px;*/bottom:15px; left:130px;}
.btnPopup .btnSure { padding: 2px 15px;border: 1px solid #888888;/*margin-left:190px;*/ margin-left:30px;}
.btnPopup .btnCancel { padding: 2px 15px;border: 1px solid #888888;/*margin-left:45px;*/}
.msgPopup { margin: 20px 10px; }
.msgPopup img{ width: 25px;vertical-align: middle; }
.msgPopup span{ font-size: 16px;padding:5px 10px; }
.msgPopup textarea{ display: block;margin: 5px 5px 0px 35px;width: 320px;height: 89px;padding: 3px 5px;font-size: 14px; }
</style>
<script type="text/javascript">
$(function () {
$("#btnAlert").click(function () {
MyAlert(true, "点击alert事件", function () {
//点击确定之后执行的事件
$("#btnAlert").html("点击了alert按钮");
});
})
$("#btnConfirm").click(function () {
MyConfirm("确定要隐藏comfirm按钮吗？", function (result) {
if (result) {
MyAlert(true, "我点击了确定", function () {
$("#btnConfirm").hide();
});
} else {
MyAlert(false, "我点击了取消");
}
})
})
$("#btnPrompt").click(function () {
MyPrompt("", true, function (result, content) {
if (result) {
MyAlert(true, "我输入的内容是：" + content);
} else {
MyAlert(false, "我点击了取消");
}
}, 64, "请填写你的姓名");
})
})
//弹出框(弹出框类型，文字描述，成功/失败)
function MyPopup(type, msg, flag, callback, contentCount, contentValue) {
//取document和window是在iframe中或者是在主窗体中
var parentDocument = $(window.parent.document).length == 1 ? window.parent.document : window.document;
var parentWindow = $(window.parent.document).length == 1 ? window.parent.window : window;
var parentBody = $(parentDocument).find("body");
$(parentBody).find(".myShade").remove();
$(parentBody).find("." + type + "Div").remove();
//添加一个浮层，当弹窗显示的时候，浮层遮挡，不能点击其他标签
$(parentBody).append("<div class='myShade'></div>");
var myShade = $(parentBody).find(".myShade");
$(myShade).css("height", $(parentWindow).height());
$(myShade).show();
//当点击浮层的时候，弹窗有变大的反应。
$(myShade).unbind("click").click(function () {
var div = $(parentBody).find("." + type + "Div");
var h = Number($(div).height());
var alertDivLeft = /\d+/.exec($(div).css("left")), alertDivTop = /\d+/.exec($(div).css("top"));
$(div).animate({ "width": "405px", "height": (h + 5) + "px", "left": (alertDivLeft - 2.5) + "px", "top": (alertDivTop - 2.5) + "px" }, 100, function () {
$(div).animate({ "width": "400px", "height": h + "px", "left": alertDivLeft + "px", "top": alertDivTop + "px" }, 100);
});
})
var divHtml = "";
if (type == "alert") {
divHtml = "<div class='alertDiv'><div class='msgPopup'><img src='images/success.jpg'/><span></span></div><div class='btnPopup'><a class='btnSure' href='javascript:void(0)'>确定</a></div></div>";
} else if (type == "prompt") {
divHtml = "<div class='promptDiv'><div class='msgPopup'><img src='images/notice.jpg'/><span></span><textarea></textarea></div><div class='btnPopup'><a class='btnCancel' href='javascript:void(0)'>取消</a><a class='btnSure' href='javascript:void(0)'>确定</a></div></div>";
} else if (type == "confirm") {
divHtml = "<div class='confirmDiv'><div class='msgPopup'><img src='images/notice.jpg'/><span></span></div><div class='btnPopup'><a class='btnCancel' href='javascript:void(0)'>取消</a><a class='btnSure' href='javascript:void(0)'>确定</a></div></div>";
}
$(parentBody).append(divHtml);
var popupDiv = $(parentBody).find("." + type + "Div");
$(popupDiv).css({ "left": ($(parentBody).width() - $(popupDiv).width()) / 2 + "px" });
$(popupDiv).find("span").html(msg + (contentCount ? "（" + contentCount + "个字符以内）" : ""));
$(popupDiv).find("textarea").attr("maxLength", contentCount);
$(popupDiv).css("top", $(parentDocument).scrollTop() + 10 + "px").show();
if (type == "alert") {
if (flag) {
$(popupDiv).find("img").attr("src", "images/success.jpg");
} else {
$(popupDiv).find("img").attr("src", "images/error.jpg");
}
$(popupDiv).find("a").unbind("click").click(function () {
HideMyShade(myShade, popupDiv, parentWindow);
if (callback != null) {
callback();
}
})
} else if (type == "prompt" || type == "confirm") {
contentValue ?InputMsg($(popupDiv).find("textarea"), contentValue): (flag ? InputMsg($(popupDiv).find("textarea"), "该内容为必填！") : "");
$(popupDiv).find("a.btnSure").unbind("click").click(function () {
if (type == "prompt") {
var content = $(popupDiv).find("textarea").val().replace(/\s/g, "");
if (flag && (content == "" || content == "该内容为必填！")) {
$(popupDiv).find("textarea").fo
92d8
cus();
return false;
}
content = content == "该内容为必填！" ? "" : content;
$(popupDiv).find("textarea").val("");
HideMyShade(myShade, popupDiv, parentWindow);
if (callback != null) {
callback(true, content);
}
} else {
HideMyShade(myShade, popupDiv, parentWindow);
if (callback != null) {
callback(true);
}
}
})
$(popupDiv).find("a.btnCancel").unbind("click").click(function () {
HideMyShade(myShade, popupDiv, parentWindow);
if (callback != null) {
callback(false);
}
})
}
DisableScroll(parentWindow, parentDocument); //禁止滚动条滚动
//点击回车键，默认点击确定按钮
$(parentWindow).unbind("keyup").keyup(function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 13) {
$(popupDiv).find("a.btnSure").click();
}
})
}
//隐藏浮层
function HideMyShade(myShade, popupDiv, window) {
$(myShade).hide();
$(popupDiv).hide();
EnableScroll(window);
}
//alert弹出框（成功/失败,文字描述）
function MyAlert(isSuccess, msg, callback) {
MyPopup("alert", msg, isSuccess, callback);
}
//prompt弹出框（文字描述,文本框是否必填,回调函数,内容字数，内容提示文字）
function MyPrompt(msg, isMust, callback, contentCount, contentValue) {
MyPopup("prompt", msg, isMust, callback, contentCount, contentValue);
}
//confirm 弹出框
function MyConfirm(msg, callback) {
MyPopup("confirm", msg, null, callback);
}
//禁止滚动
function DisableScroll(window, document) {
var scrollTop = $(document).scrollTop();
window.onmousewheel = function () {
return false;
}
window.onscroll = function () {
$(document).scrollTop(scrollTop);
}
}
//可以滚动
function EnableScroll(window) {
window.onmousewheel = function () {
return true;
}
window.onscroll = function () {
return true;
}
}
//获取焦点/移除焦点提示文字
function InputMsg(that, msg) {
$(that).val(msg).click(function (event) {
event.stopPropagation();
}).unbind("focus").focus(function (event) {
if ($(this).val() == msg) {
$(this).val("");
}
}).unbind("blur").blur(function () {
if ($(this).val().replace(/\s/g, "") == "") {
$(this).val(msg);
}
});
}
</script>
</head>
<body>
<div class="testDiv">
<a href="javascript:void(0)" id="btnAlert">alert弹窗</a>
<a href="javascript:void(0)" id="btnConfirm">confirm弹窗</a>
<a href="javascript:void(0)" id="btnPrompt">prompt弹窗</a>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [java]_[线程池的使用]
- 中值滤波 matlab实现
- C++面向对象编程<三>：操作符重载
- 身份证号码工具类
- MySQL 启动时禁用了 InnoDB 引擎的解决方法
- mvc框架嵌入文本编辑器
- 设计模式专题00——基础
- JavaScript 中的 .prototype
- Material Design风格的水波涟漪效果（Ripple Effect）的实现
- bozj2186 [Sdoi2008]沙拉公主的困惑
- javascript之一切皆为对象3
- 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想
- CodeForces 589F-Gourmet and Banquet-二分答案
- Java小笔记
- 简单的对象属性值对比方法
- ListView的item点击事件
- swift入门语法&&基础教程
- PHP 文件处理
- IOS开发基础之UINavigationController
- mybatis实体类字段名与数据库字段名不匹配问题