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

来源：互联网发布：淘宝爆款计划表编辑：程序博客网时间：2024/06/03 09:52

实现过程：

①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 onclick="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，这个是有关于定时器的异步操作问题。

0 0

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

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