JS使用alert如何实现一个弹框效果-创新互联
JS使用alert如何实现一个弹框效果?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
网站的建设创新互联公司专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为成都食品包装袋等企业提供专业服务。具体内容如下
先上图:
alert.js代码:
var myAlert = { alertbox : function(alertContent){ var windowWidth = window.innerWidth; windowHeight = window.innerHeight; alertContainer = document.createElement("div"); alertContainer.id = "myAlertBox"; alertContainer.style.cssText="position:absolute;left:0px;top:0px;width:100%;z-index:9999;"; alertContainer.style.height = windowHeight+"px"; alertOpacity = document.createElement("div"); alertOpacity.style.cssText="position:absolute;left:0px;top:0px;width:100%;background:#000;opacity:0.5;z-index:9999;"; alertOpacity.style.height = windowHeight+"px"; alertContainer.appendChild(alertOpacity) alertMainBox = document.createElement("div"); alertMainBox.style.cssText="position:absolute;width:200px;height:200px;line-height:200px;text-align:center;background:green;z-index:10000;" alertMainBoxLeft = (windowWidth-200)/2; alertMainBoxTop = (windowHeight-200)/2; alertMainBox.style.left = alertMainBoxLeft+"px"; alertMainBox.style.top = alertMainBoxTop+"px"; alertMainBox.innerHTML = alertContent; alertContainer.appendChild(alertMainBox); alertClose = document.createElement("div"); alertClose.id = "closeBox"; alertClose.style.cssText = "position:absolute;right:0px;top:0px;width:30px;height:30px;background:red;cursor:pointer"; alertMainBox.appendChild(alertClose); document.body.appendChild(alertContainer); closeButton = document.getElementById("closeBox"); console.log(closeButton) closeButton.onclick = function(){ document.body.removeChild(document.getElementById("myAlertBox")); } } }
名称栏目:JS使用alert如何实现一个弹框效果-创新互联
网页地址:http://scyanting.com/article/eieio.html