JavaScript封装 弹出框
JavaScript封装 弹出
2023-09-11 14:19:17 时间
本文转自:https://blog.csdn.net/qq3401247010/article/details/78005380
<button>点击跳转</button>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$("button").click(function(){
// myAlert("提示信息!");
// myAlert("跳转到其他页面?",function(f){
// if(f){
// window.open("http://www.baidu.com");
// }
// });
myAlert("是否跳转到百度页面?",function(f){
if(f){
window.open("http://www.baidu.com");
}
},true);
})
function myAlert(str,click,useCancel){
var overflow="";
var $hidder=null;
var clickHandler=click||$.noop;
var myClickHandler=function(){
$hidder.remove();
$("body").css("overflow",overflow);
clickHandler($(this).html()=="确定");
};
var init=function(){
$hidder = $("<div style='width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;text-align: center;position:fixed;left:0;top:0;'></div>");
var $myalert = $("<div style='width:300px;position:absolute;top:30%;left:50%;margin-left:-150px;padding:20px;background:#fff;border-radius:5px;'>"+
"<div style='padding-bottom:10px;border-bottom:1px solid #e5e5e5;font-size:20px;color:#f83;'>温馨提示</div></div>").appendTo($hidder);
$("<div style='padding:10px 0;color:#333;border-bottom:1px solid #e5e5e5;'>"+str+"</div>").appendTo($myalert);
var $myalert_btn_div = $("<div style='padding-top:10px;'></div>").appendTo($myalert);
var $okBtn = $("<div style='float:left;width:100%;color:#eee;border-radius:2px;padding:7px 0;background: #abcdef;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;' class='bluebg1'>确定</div>").appendTo($myalert_btn_div).click(myClickHandler);
if(useCancel){
$okBtn.css({"width":"50%","border-right":"5px solid #fff"});
$("<div style='float:left;width:50%;border-left:5px solid #fff;border-radius:2px;padding:7px 0;color:#fff;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:#ccc;'>取消</div>").appendTo($myalert_btn_div).click(myClickHandler);
}
overflow=$("body").css("overflow");
$("body").css("overflow","hidden").append($hidder);
};
init();
}
</script>
相关文章
- Javascript 构造函数
- how many types in javascript
- javascript利用jquery-1.7.1来判断是否是谷歌Chrome浏览器
- IE浏览器下返回执行错误的Javascript代码所在的问题(js有用)
- JavaScript - 获取字符串字节数(函数封装)
- JavaScript - 获取数组最后一个元素(支持一维数组与二维复杂对象数组)多种方法取数组的最后一个元素
- JavaScript - 将金额数字转为汉字大写
- JavaScript: setTimeout & setInterval
- 【JavaScript】重温Javascript继承机制
- 【JavaScript】Javascript中的函数声明和函数表达式
- 【JavaScript】熟悉js的继承链,作用域,闭包
- 【JavaScript】Understanding callback functions in Javascript
- 一篇文章带你了解JavaScript中的基础算法之“字符串类”
- JavaScript代码笔记重点:
- 《JavaScript面向对象编程指南》——第2章 基本数据类型、数组、循环及 条件表达式2.1 变量
- 《JavaScript面向对象精要》——1.5 访问属性
- 《JavaScript开发框架权威指南》——第1章 Bower 1.1准备工作
- 《Windows 8 开发权威指南:HTML5 和JavaScript卷》——1.2 如何安装Visual Studio 2012
- 《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——1.2 内容和情景就是一切
- JavaScript权威指南学习笔记5
- 简短Javascript代码实现滑动菜单效果
- JavaScript实现2048小游戏,我终于赢了一把
- javascript自定义浏览器右键菜单