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 相关文章推荐
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
瀑布流布局代码一例
Apr 11 Javascript
javascript常用代码段搜集
Dec 04 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 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出错界面
2006/10/09 PHP
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
使用Apache的rewrite
2021/03/09 Servers
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
10张动图学会python循环与递归问题
2021/02/06 Python
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
演讲稿的写法
2014/05/19 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
项目建议书
2015/02/04 职场文书
酒店厨房管理制度
2015/08/06 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏