JavaScript弹出层的使用

刺骨的言语ヽ痛彻心扉 2022-07-12 12:10 158阅读 0赞

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>
    		
    		<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
    		<script type="text/javascript" src="js/plugins/layer/layer.js"></script>
    		
    		<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