最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript如何实现alert弹框效果 JavaScript实现alert弹框效果代码
时间:2020-11-19 编辑:袖梨 来源:一聚教程网
JavaScript如何实现alert弹框效果?本篇文章小编给大家分享一下JavaScript实现alert弹框效果代码,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
效果图:
为什么会出现这个需求?浏览器自带的alert不好用吗?
自带的alert在不同的浏览器是有差异的,而且样式也不美观,用户体验度不是很好。所以我们要自己写一个alert弹框,这样我们就可以按照我们自己的需求,把alert弹框做的美观一点。
以下是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.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.px"; alertContainer.appendChild(alertOpacity) alertMainBox = document.createElement("div"); alertMainBox.style.cssText="position:absolute;line-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;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")); } } }
以下是具体要用时的代码:
Study
用法很简单,引入alert.js文件,要用时直接myAlert.alertbox("内容");和使用alert一样。
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12