javascript 自定义弹窗自定义参数过渡

最新推荐文章于 2023-02-24 21:42:56 发布

鬼谷中妖

最新推荐文章于 2023-02-24 21:42:56 发布

阅读量942

点赞数

分类专栏： javascript 文章标签： javascript 原生参数 css3 过渡

本文链接：https://blog.csdn.net/a562550212/article/details/51869627

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

实现过程：

①javascript动态创建节点；

②将参数以innerHTML方式写入；

③以父子集关系，把节点塞进去。

本人是js原生粉，能不用插件，就不用扩展。前几天，小组里那个写需求的非得让我把alert弄掉，换成自定义弹窗。

周六下午突然想看看安卓，吃完晚饭后就在搞android studio 的打包apk，到10点还没搞好。一生气一跺脚，打开webstorm写那个弹窗。

我的初衷是写一个能够带参数的方法，这样，可以根据实际情况输出相应的提示语句。废话有点多，上代码：

我把js，css放在一个html里，方便朋友预览。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*信息提示框*/
		.msg-bg {
		  width: 100%;
		  height: 100%;
		  background-color: rgba(0, 0, 0, 0.5);
		  position: absolute;
		  top: 0;
		  left: 0;
		  z-index: 1;
		  display: block;
		  text-align: center;
		}
		.msg-bg .msg-panel {
		  width: 300px;
		  height: 50px;
		  background-color: #ffffff;
		  display: inline-block;
		  border: 1px solid #c1c1c1;
		  border-radius: 3px;
		  line-height: 50px;
		  word-spacing: 5px;
		  margin-top: 200px;
		}
	</style>
</head>
<body>
	<button οnclick="showModifyMessage('幸福总是短暂的')">点我</button>
</body>
	<script>
		function showModifyMessage(str){
		    var MsgBgBiv = document.<span style="color:#ff0000;">createElement</span>("div");
		    MsgBgBiv.setAttribute("class","msg-bg");

		    var MsgPanel = document.createElement("div");
		    MsgPanel.setAttribute("class","msg-panel");
		    MsgBgBiv.appendChild(MsgPanel);

		    MsgPanel.<span style="color:#ff0000;">innerHTML</span>=str;
		    console.log(str);
		    document.body.<span style="color:#ff0000;">appendChild</span>(MsgBgBiv);
		    /*定时器去除提示框*/
		    setTimeout(function(){
		        MsgBgBiv.style.display="none";
		    },2000);
		}
	</script>
</html>

我自己用了一下，没什么问题，如果各位在用的时候遇到什么问题，还希望麻烦您告诉我一声，谢谢。

网上的带参数的比较少，希望对之后遇到的朋友有些帮助。

感觉响应有些慢，网上没找到关于这方面优化的，如果有大神了解，还希望能告知。

早上醒来的时候，突然意识到写需求的那位大哥肯定会说我弹出框太突兀了，得加个过渡，像jquery的动画一样。所以老子机智地又改了一下，下面直接上css和js

.msg-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  text-align: center;
}
.msg-bg .msg-panel {
  width: 300px;
  height: 50px;
  background-color: #ffffff;
  display: inline-block;
  border: 1px solid #c1c1c1;
  border-radius: 3px;
  line-height: 50px;
  word-spacing: 5px;
  margin-top: 200px;
  opacity: 0;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

function showModifyMessage(str){
    var MsgBgBiv = document.createElement("div");
    MsgBgBiv.setAttribute("class","msg-bg");


    var MsgPanel = document.createElement("div");
    MsgPanel.setAttribute("class","msg-panel");
    MsgBgBiv.appendChild(MsgPanel);

    MsgPanel.innerHTML=str;

    document.body.appendChild(MsgBgBiv);
    console.log("-----------1---------------");
    /*定时器过渡提示框*/
    setTimeout(function(){
    <span style="white-space:pre">	</span>MsgPanel.style.opacity=1;
    <span style="white-space:pre">	</span>console.log("----------2-------");
    }, 0)
    /*定时器去除提示框*/
    setTimeout(function(){
    <span style="white-space:pre">	</span>document.body.removeChild(MsgBgBiv);
    <span style="white-space:pre">	</span>console.log("--------3---------");
        // MsgBgBiv.style.display="none";
    },5000);
    console.log("-----4----------")
    
}

中间加了一个定时器，用来改变提示框的透明度（这里不加定时器不行，有兴趣的朋友可以试一下）。

还有我代码里，按照顺序添加了1234步骤标示，但是最后浏览器控制台打出的确实1423，这个是有关于定时器的异步操作问题。