原生js弹出层alert,confirm

程序员文章站 2022-05-06 09:09:13

...

html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹出层测试</title>
	<meta name="author" content="slongzhang">
	<link rel="stylesheet" type="text/css" href="popup_sl.css">
</head>
<body>
	<button id='j_alert' class="sl_btn">alert</button>
	<button id='j_confirm' class="sl_btn">confirm</button>
	<!-- <div id="sl_coverLayer"></div>
	<div id="sl_msgbox">
		<div class="sl_title">{{title}}<span id="sl_msgClose" class="sl_msgicon"></span></div>
		<div class="sl_content"><i class="sl_fl sl_msgicon sl_icon sl_ico0"></i>{{msg}}</div>
		<div class="sl_foot"><a id="sl_btnOk" class="sl_btn sl_btn_success">确定</a><a id="sl_btnNo" class="sl_btn">取消</a></div>
	</div> -->
<script type="text/javascript" src="popup_sl.js"></script>
<script type="text/javascript">
window.onload=function(){
	var j_alert = listenBySl(document.getElementById('j_alert'),'click',function(){
		// alert 使用方法
		slPopup.Alert({"msg":"添加成功","icon":2});
	});
	var j_confirm = listenBySl(document.getElementById('j_confirm'),'click',function(){
		// confirm使用方法
		slPopup.Confirm({"msg":"是否确认修改","icon":4},function(){
    		alert('确认修改');
    	});
	});
}
</script>
</body>
</html>

pupup_sl.css代码

/**遮盖层**/
#sl_coverLayer{
	z-index: 99999;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: black;
	filter: Alpha(opacity=60);
	opacity: 0.6;
}
#sl_msgbox{
	font: 14px/24px "PingFang SC","Lantinghei SC","Microsoft YaHei",arial,"\5b8b\4f53",sans-serif,tahoma;
	z-index: 999999;
	position: fixed;
	width: 300px;
    background-color: white;
    border-radius: 1px;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
}
#sl_msgbox .sl_title{
	position: static;
	padding: 8px 40px 8px 1em;
	border-bottom: 1px solid #eee;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #F8F8F8;
    border-radius: 2px 2px 0 0;
}
#sl_msgbox .sl_content{
	padding: 1em;
    word-break: break-all;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto;
}
#sl_msgbox .sl_foot{
	text-align: right;
    padding: 0 1em 12px;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
}
#sl_msgClose{
	display: inline-block;
	position: absolute;
	top: 13px;
	right: 15px;
	width: 16px;
    height: 16px;
    font-size: 12px;
    background-repeat: no-repeat;
    background-position: 1px -40px;
    cursor: pointer;
}
#sl_msgClose:hover {
    opacity: 0.7;
}
.sl_msgicon{
	/*背景图*/
	background-image: url(msgicon.png);
}
.sl_fl{
	float: left;
}
.sl_icon{
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	background-repeat: no-repeat;
}
.sl_ico1{
	background-position: 0px 0;
}
.sl_ico2{
	background-position: -30px 0;
}
.sl_ico3{
	background-position: -60px 0;
}
.sl_ico4{
	background-position: -90px 0;
}
.sl_ico5{
	background-position: -120px 0;
}
.sl_ico6{
	background-position: -150px 0;
}
.sl_ico7{
	background-position: -180px 0;
}
.sl_btn{
	display: inline-block;
	height: 28px;
    line-height: 28px;
    margin: 5px 5px 0;
    padding: 0 15px;
    border: 1px solid #dedede;
    background-color: #fff;
    color: #333;
    border-radius: 2px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
}
.sl_btn:hover {
    opacity: 0.9;
    text-decoration: none;
}
.sl_btn_success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

样式里用到的图片
原生js弹出层alert,confirm
popup_sl.js

/**
	 * 参考案例https://www.jianshu.com/p/1499ada843bb 和 layui
	 * author:aaa@qq.com
	 * date:2019/10/12
	 */
	 /**
	  * 监听处理，兼容IE
	  * @param  {[type]} element [description]
	  * @param  {[type]} type    [description]
	  * @param  {[type]} handler [description]
	  * @param  {[type]} capture [description]
	  * @return {[type]}         [description]
	  */
	 var listenBySl = function(element, type, handler, capture){
	 	var capture = capture|| false;// 兼容IE处理(IE不支持函数参数默认值用法)
		if(element.addEventListener){
			// W3C内核
			element.addEventListener(type, handler, capture);
		}else{
			// IE内核
			element.attachEvent('on'+type, handler, capture);
		}

		return {"remove":function(){
			if(element.removeEventListener){
				// W3C内核
				element.removeEventListener(type, handler, capture);
			}else{
				// IE内核
				element.detachEvent('on'+type, handler, capture);
			} 
		}}
	}

	/**
	 * 弹出定义
	 * @type {Object}
	 * msgObj [string|Object]	string则为msg提示，Object则{"msg":msg,"icon":1,"title":title}（icon:[1:感叹号;2:打钩;3:打叉;4:问号;5:加锁;6哭脸;7笑脸]）
	 */
	window.slPopup = {
		Alert: function(msgObj) {
            GenerateHtml("alert",msgObj);
            sl_btnEvent();
        },
        Confirm: function(msgObj, callback) {
            GenerateHtml("confirm", msgObj);
            sl_btnEvent(callback);
        }
	}
	/**
	 * 生成Html
	 * @param {string} type  	[弹窗类型 alert|confirm]
	 * @param {Object} msgObj   [消息对象{"msg":msg,"icon":1,"title":title}]
	 * icon:[1:感叹号;2:打钩;3:打叉;4:问号;5:加锁;6哭脸;7笑脸]
	 */
    var GenerateHtml = function(type, msgObj) {
    	if(typeof(msgObj) !== "object"){
    		msgObj = {"msg": msgObj};
    	}
    	//let {icon = 0,msg = '<i class="sl_fl sl_msgicon sl_icon sl_ico1"></i>系统错误,请联系管理员',title = '温馨提示'} = msgObj;// ES6语法IE不支持
    	var icon = msgObj.icon || 0,msg = msgObj.msg || '<i class="sl_fl sl_msgicon sl_icon sl_ico1"></i>系统错误,请联系管理员',title = msgObj.title || '温馨提示';
        if(icon > 0 && icon < 8){
        	msg = '<i class="sl_fl sl_msgicon sl_icon sl_ico'+icon+'"></i>'+msg;
        }
        var _html = '<div id="sl_coverLayer"></div>'+
			'<div id="sl_msgbox">'+
			'<div class="sl_title">'+title+'<span id="sl_msgClose" class="sl_msgicon"></span></div>'+
			'<div class="sl_content">'+msg+'</div>';
        if (type == "alert") {
            _html += '<div class="sl_foot"><a id="sl_btnOk" class="sl_btn sl_btn_success">确定</a></div>';
        }else if(type == "confirm") {
            _html += '<div class="sl_foot"><a id="sl_btnOk" class="sl_btn sl_btn_success">确定</a><a id="sl_btnNo" class="sl_btn">取消</a></div>';
        }
        _html += '</div>';
        var msgBox = document.createElement("div");
        msgBox.innerHTML = _html
        document.getElementsByTagName('body')[0].appendChild(msgBox);
    }
    // 确定/取消/关闭 按钮事件
    var sl_btnEvent = function(callback) {
    	// 添加监听
    	var sl_btnOk = document.getElementById('sl_btnOk');
		var listenBtnOk = listenBySl(sl_btnOk,'click',function(){
			slExitPopup();
            if (typeof(callback) == 'function') {
                callback();
            }
            listenBtnOk.remove();// 移除监听
		});
		var sl_msgClose = document.getElementById('sl_msgClose');
		if(sl_msgClose){
			var listenmsgClose = listenBySl(sl_msgClose,'click',function(){
				slExitPopup();
				// console.log('您点击了关闭');
				listenmsgClose.remove();
			});
		}
		var sl_btnNo = document.getElementById('sl_btnNo');
		if(sl_btnNo) {
			var listenBtnNo = listenBySl(sl_btnNo,'click',function(){
				slExitPopup();
				// console.log('您点击取消');
				listenBtnNo.remove();
			});
		}
		
    }
    // 移除遮盖层和弹出层
    // 移除遮盖层和弹出层
    function slExitPopup(){
    	var ele = document.getElementById('sl_coverLayer').parentNode;
    	var eleParent = ele.parentNode;
    	eleParent.removeChild(ele);
    }

原生js弹出层alert,confirm

参考于https://www.jianshu.com/p/1499ada843bb 和 layui的弹出层

原生js弹出层alert,confirm

js点击弹出div层实现可拖曳的弹窗效果

点击文字链接弹出确认框基于js Confirm实现

js弹出选择对话框（js中confirm自定义按钮文字）

js点击弹出div层实现可拖曳的弹窗效果

点击文字链接弹出确认框基于js Confirm实现

layer弹出层框架alert与msg详解

js弹出选择对话框（js中confirm自定义按钮文字）

原生js实现弹出层效果

JS实现的添加弹出层并完成锁屏操作示例

js遮罩弹出层