原生js模仿layui弹窗

最新推荐文章于 2024-05-23 14:44:26 发布

核心已转储911

最新推荐文章于 2024-05-23 14:44:26 发布

阅读量537

点赞数

分类专栏：前端随笔文章标签： layui alert

本文链接：https://blog.csdn.net/qq_30236067/article/details/82855543

版权

前端随笔专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>alter</title>
</head>
<body>
<script>
		window.alert = alert;
			function alert(data) {	
			var div_z = document.createElement("div"),
				div_all= document.createElement("div"),
				div_title = document.createElement("div"),
				div_info = document.createElement("div"),
				div_qd = document.createElement("div"),
				div_btn_a = document.createElement("a"),
				btntextNode = document.createTextNode(data ? data : ""),
				btnTitle = document.createTextNode("信息");
				btnText = document.createTextNode("确定");
				div_qd.appendChild(div_btn_a);
				div_all.appendChild(div_title);	
				div_all.appendChild(div_info);	
				div_all.appendChild(div_qd);
				document.getElementsByTagName("body")[0].appendChild(div_z);
				document.getElementsByTagName("body")[0].appendChild(div_all);
				div_info.appendChild(btntextNode);			
				div_title.appendChild(btnTitle);
				div_btn_a.appendChild(btnText);
	
			css(div_z,{
				    'z-index': '1993',
					'background-color': 'rgb(0, 0, 0)',
					'opacity': '0.3',
					'top': '0',
					'left': '0',
					'width': '100%',
					'height': '100%',
					'position': 'fixed',
				})			
			css(div_all, {
					'position' : 'fixed',
					'z-index': '19930216',
					'left' : '0',
					'right' : "0",
					'top' : '20%',
					'width': '260px',
					'margin' : '0 auto',
					'background-color' : '#f00',
					'font-size ': '20px',
					'text-align' : 'center',
					'background-color': '#fff',
				});
			css(div_title,{
					'background': '#009f95',
					'color': '#fff',
					'border': 'none',
					'padding': '0 80px 0 20px',
					'height': '42px',
					'line-height': '42px',
					'text-align': 'left',
				})	
			css(div_info,{
					'position': 'relative',
					'padding': '20px 20px 20px 40px',
					'line-height': '24px',
					'word-break': 'break-all',
					'overflow': 'hidden',
					'font-size': '14px',
					'overflow-x': 'hidden',
					'overflow-y': 'auto',
					'text-align': 'left',
				})		
			css(div_qd,{
					'color': '#000',
					'border': 'none',
					'padding': ' 0 15px 12px',
					'height': '42px',
					'line-height': '42px',
					'text-align': 'right',
				})				
			css(div_btn_a,
				{
					'height': '28px',
					'line-height': '28px',
					'margin': '5px 5px 0',
					'padding': '5px 15px',
					'border': '1px solid #dedede',
					'background': '#009f95',
					'border-color': '#009f95',
					'border-radius': '2px',
					'font-weight': '400',
					'cursor': 'pointer',
					'text-decoration': 'none',
					'font-size':'14px',
					'color':'#fff'
				}
			)
			div_btn_a.onclick = function() {
				document.body.removeChild(div_all);
				document.body.removeChild(div_z);
				//div_all.style.display='none';
				//div_z.style.display='none';
			}
			function css(targetObj, cssObj) {
			var str = "";
			for(var i in cssObj) {
			str += i + ":" + cssObj[i] + ";";
			}
			targetObj.style.cssText = str;
				}		
			}
			alert('墨绿风格，点击确认看深蓝');
</script>
</body>
</html>``

核心已转储911

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生js模仿layui弹窗

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;alter&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;script&gt; window.alert = alert
复制链接

扫一扫