动态添加,直接在JS里面写就可以
废话不多说,直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟alert</title>
<style type="text/css">
</style>
</head>
<body>
<div id="diaLogContainer">
<!-- 随便加的两个DIV,为了突出mask的透明色 -->
<div class="1">4354545</div>
<div class="2">4354545</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
// 要在body中添加的代码
var alertHtml='<div class="mask" id="mask" style="width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);position: fixed;top: 0;left: 0;display: none;"></div><div class="alert" id="alert" style=" width: 25%; position: fixed; top: 40%; left: 0; right: 0; margin: auto; padding: 10px; box-sizing: border-box; border-radius: 4px; box-shadow: 0 0 4px; text-align: center; word-wrap:break-word; display: none; background-color:rgba(0, 40, 80, 0.8);color: #ffffff; font-size: 15px;"></div> ';
// 在diaLogContainer中的前面添加html代码
// append() - 在被选元素的结尾插入内容
// prepend() - 在被选元素的开头插入内容
// after() - 在被选元素之后插入内容
// before() - 在被选元素之前插入内容
$('#diaLogContainer').prepend(alertHtml);
// 用JQ获取dom层元素(js也可以,不过JQ方便点)
var alert = $('#alert'), mask = $('#mask');
// 声明show_alert函数
var show_alert = function(message){
alert.html(message);
alert.css('display','block');
mask.css('display','block');
$(document).click(function(){
hide_alert();
});
var timer_alert = setTimeout("hide_alert()",3000);
};
// 声明隐藏的函数
var hide_alert= function(){
alert.css('display','none');
mask.css('display','none');
}
// 实验内容
show_alert("Neil fell good");
</script>
</html>
需要引用JQ ,一般都会用,需要一个元素作为插入的基点,可以是body,也可以是有ID的,总之可以获取到就行
原理是触发函数,携带参数产生两个DIV,都是fixed定位,后面的mask占据全部半透明的背景,中间的div为alert框,加一个定时器,几秒钟自动消失,这样的话作为提示信息会很方便,或者随便点击什么就可以消失(增加一个点击监听函数)
重点就是那个获取的元素。成功后直接用show_alert(“需要提示的内容”)
框的大小,颜色可以自己修改,word-wrap:break-word;是强制换行,如何不需要,可以删去。
感觉描述的够具体了,还有不明白的可以评论上提问,我会耐心解答!