JavaScript弹出层的使用

最新推荐文章于 2023-06-01 15:07:24 发布

Bwz_Learning

最新推荐文章于 2023-06-01 15:07:24 发布

阅读量789

点赞数 1

分类专栏： JavaScript Util 文章标签： JavaScript弹出层 alert confirm

本文链接：https://blog.csdn.net/zbw18297786698/article/details/56669592

版权

JavaScript Util 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1、在前台页面中，弹出层是一个比较常用的功能。现在分享一下关于alert和confirm弹出层的使用技巧。在layer的基础上对alert和confirm进行了重写，使得使用起来更加的方便。

2、关于alert和confirm重写代码如下，common.js

/**
 * 重写了,alert和confirm函数。
 * 使用起来更加的方便。
 * 需要layer.js 和 jquery 1.8 版本以上的支持
 */

//重写alert
window.alert = function(msg, callback) {
	parent.layer.alert(msg, function(index) {
		parent.layer.close(index);
		//函数的回调
		if(typeof(callback) === "function") {
			callback("ok");
		}
	});
}

//重写confirm式样框
window.confirm = function(msg, callback) {
	parent.layer.confirm(msg, {
			btn: ['确定', '取消']
		},
		function() { //确定事件
			if(typeof(callback) === "function") {
				callback("ok");
			}
		});
}

3、使用方法

在html页面,导入jquery.js 、layer.js 、common.js 就可以了

4、使用的例子代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>测试弹出层效果</title>
		<!--引入js文件-->
		<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="js/plugins/layer/layer.js"></script>
		<!--引入common.js,支持弹出层的重写-->
		<script type="text/javascript" src="js/common.js"></script>
	</head>

	<body>
		<div id="one">one</div>
		<button id="testAlert" type="button">测试alert</button>
		<button id="testConfirm" type="button">测试confirm</button>
	</body>

	<script type="text/javascript">
		//1.测试alert
		$("#testAlert").click(function() {
			alert("要修改id为one的文本内容", function() {
				//改变id为one的文本内容
				$("#one").text("id为one的文本内容已经被修改.");
			});
		});

		//2.测试confirm
		$("#testConfirm").click(function() {
			confirm("确定删除数据吗?", function() {
				//可以发出ajax请求，使得后台数据被删除
				alert("已经发出ajax请求,删除数据.")
			});
		});
	</script>

</html>

5、源码下载地址

     https://git.oschina.net/baowei/My_JavaScript

Bwz_Learning

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript弹出层的使用

1、在前台页面中，弹出层是一个比较常用的功能。现在分享一下关于alert和confirm弹出层的使用技巧。在layer的基础上对alert和confirm进行了重写，使得使用起来更加的方便。2、关于alert和confirm重写代码如下，common.js/** * 重写了,alert和confirm函数。 * 使用起来更加的方便。 * 需要layer.js 和 jquery 1.8
复制链接

扫一扫

专栏目录