修改网页的alert弹框样式让你的页面更美观（js封装之路（1.1））

最新推荐文章于 2024-01-09 18:13:56 发布

爱学习的蚯蚓

最新推荐文章于 2024-01-09 18:13:56 发布

阅读量1.1w

点赞数 8

分类专栏： alert样式自我编辑组件的简单应用基础的html和css布局文章标签： alert样式组件 html 初级前端js

本文链接：https://blog.csdn.net/szl199107101035/article/details/77774035

版权

alert样式自我编辑组件的简单应用基础的html和css布局专栏收录该内容

1 篇文章

订阅专栏

由于页面中原来的alert弹框样式相当的丑，所以就想到了自己去设置一下alert的弹框样式

首先是自己先设计好一个弹框的样式可以如下图：

样式搭建完成就可以用js来编写一个alert函数了：

js部分如下：

function alert(e){
 //此处将html中的div等元素拼接起来，添加到body中
    var html="";
    	html+="<div class='con'><div id='msg'>";
    	html+="<div class='info_message'>";
    	html+="<div class='alertTitle'>提示</div>";
    	html+="<span class='detail_message'>"+e+"</span>";
    	html+="</div><div id='alertSure'>确定</div>";
    	html+="<div id='alertCancel'>取消</div></div></div>"
    $('body').append(html);
    clearmsg();
}
function clearmsg(){

//确认按钮
    $('#alertSure').click(function(){
    	$("#msg").remove();
    	$('.con').remove();
    })

//取消按钮
    $('#alertCancel').click(function(){
    	$("#msg").remove();
    	$('.con').remove();
    })
};

将这个js引用，前提要添加jq的框架在此js前面要不$符号和一些方法会报错，有兴趣的可以用原生js来操作

下面贴一下我的代码，有兴趣的同学可以看下效果

html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>alert样式修改</title>
	<link rel="stylesheet" href="alert.css">
	<script src="jquery-1.11.3.min.js"></script>
	<script src="alert.js"></script>
</head>
<body>

这是我自己编写的样式div后面放到js中了，此处是注释掉的
<!-- <div class="con">
	<div id='msg'>
		<div class="info_message">
			<div class="alertTitle"></div>
			<span class="detail_message">
				显示信息显示信息
			</span>
		</div>
		<div id="alertSure">确定</div>
		<div id="alertCancel">取消</div>
	</div>
</div> -->

<script>

	 alert('测试');
</script>
			

</body>
</html>

css：

html,body{height:100%;}
	.con{
		width:100%;
		height:100%;
		background:rgba(0,0,0,.1);
		position:relative;
	}
	#msg{
		position:absolute;
		top:30%;
		left:35%;
	}
	.info_message {
	    color: #000;
	    background:#fff;
	    height: 200px;
	    display: inline-block;
	    width:400px;
	    border-radius: 5px;
	}
	#alertSure,#alertCancel{
		position:absolute;
	    top: 75%;
	    left: 46%;
	    width: 90px;
	    height: 40px;
	    text-align: center;
	    line-height: 40px;
	    background: #2e9cce;
	    color: #fff;
	    cursor:pointer;
	    border-radius:5px;
	}
	#alertSure{
	    top: 75%;
	    left: 46%;
	}
	#alertCancel{
	    top: 75%;
	    left: 74%;   
	}
	.detail_message{
		width:350px;
		height:115px;
		text-align:center;
		overflow: hidden;
		display:inline-block;
		padding:10px;
		margin-left:15px;
		color:#2b9bc5;
	}
	#alertSure:hover,#alertCancel:hover{
			background:rgba(118, 206, 247, 0.88);
	}
	.alertTitle{
		height:30px;
		background:rgb(114, 209, 255);
	}

js部分：

function alert(e){
    // $("body").append("<div id='msg'><span>"+e+"</span></div>");
    var html="";
    	html+="<div class='con'><div id='msg'>";
    	html+="<div class='info_message'>";
    	html+="<div class='alertTitle'>提示</div>";
    	html+="<span class='detail_message'>"+e+"</span>";
    	html+="</div><div id='alertSure'>确定</div>";
    	html+="<div id='alertCancel'>取消</div></div></div>"
    $('body').append(html);
    clearmsg();
}
function clearmsg(){
    // var t = setTimeout(function(){
    //     $("#msg").remove();
    // },2000)
    $('#alertSure').click(function(){
    	$("#msg").remove();
    	$('.con').remove();
    })
    $('#alertCancel').click(function(){
    	$("#msg").remove();
    	$('.con').remove();
    })
};