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 相关文章推荐
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
Vue实现简单的跑马灯
May 25 Javascript
three.js如何实现3D动态文字效果
Mar 03 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函数的实现原理及性能分析(二)
2015/05/13 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
实例Python处理XML文件的方法
2015/08/31 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
社区务虚会发言材料
2014/10/20 职场文书
超市食品安全承诺书
2015/04/29 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
求职信如何撰写?
2019/05/22 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android