纯js（jq）模拟alert弹窗

最新推荐文章于 2022-05-27 15:11:11 发布

Neil_Lien

最新推荐文章于 2022-05-27 15:11:11 发布

阅读量1.4k

点赞数 2

分类专栏： javascript 文章标签： javascript alertdialog-自定义

本文链接：https://blog.csdn.net/sinat_38371266/article/details/78782480

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

动态添加，直接在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;是强制换行，如何不需要，可以删去。
感觉描述的够具体了，还有不明白的可以评论上提问，我会耐心解答！

Neil_Lien

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯js（jq）模拟alert弹窗

动态添加，直接在JS里面写就可以废话不多说，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模拟alert</title> <style type="text/css"> </style></head><body><div id="diaLogContainer"> <!--
复制链接

扫一扫