JavaScript实现alert弹框效果


Posted in Javascript onNovember 19, 2020

本文实例为大家分享了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.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"));
 }
 }
}

以下是具体要用时的代码:

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Study</title>
 </head>
 <script type="text/javascript" charset="utf-8" src="alert.js"></script>
 <body>
 <script type="text/javascript" charset="utf-8">
 myAlert.alertbox("这是自定义alert框");
 </script>
 </body>
</html>

用法很简单,引入alert.js文件,要用时直接myAlert.alertbox("内容");和使用alert一样。

在这块给大家提供个思路,供大家参考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
jQuery 使用手册(五)
Sep 23 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
基于javascript编写简单日历
May 02 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 #Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 #Vue.js
原生js实现自定义消息提示框
Nov 19 #Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 #Javascript
jQuery-App输入框实现实时搜索
Nov 19 #jQuery
elementUI同一页面展示多个Dialog的实现
Nov 19 #Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 #Javascript
You might like
测试php函数的方法
2013/11/13 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
vue v-model表单控件绑定详解
2017/05/17 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
详解python里的命名规范
2018/07/16 Python
Python判断telnet通不通的实例
2019/01/26 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
EJB的角色和三个对象
2015/12/31 面试题
开学寄语大全
2014/04/08 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
高中生评语大全
2014/04/25 职场文书
银行转正自我鉴定
2014/09/29 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2014年党委工作总结
2014/11/22 职场文书
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
Golang数据类型和相互转换
2022/04/12 Golang
利用Python实现模拟登录知乎
2022/05/25 Python