代码小DEMO随笔---JS原生手机版本alert弹框
之前的随笔写的是WEB版本的弹框，这次是手机版本,欢迎路过的大佬们提出更好的写法~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<button onclick="test01()">点击弹出按钮，三秒关闭</button>
<button onclick="test02()">不会关闭的弹框</button>
<button onclick="test03()">带关闭按钮的弹框</button>
<body>
<script>
function test01() {
createAlertSetTime(['哈哈哈哈', '哈哈哈哈', '哈哈哈哈'], 3000)
}
function test02() {
createAlert(['不会关闭的弹框', '不会关闭的弹框'])
}
function test03() {
createAlert(['带关闭按钮的弹框', '带关闭按钮的弹框'], true)
}
function closeMyAlert() {
var idObject = document.getElementById('mySmallAlertBox');
idObject.style.display = "none";
if (idObject != null)
idObject.parentNode.removeChild(idObject);
}
function createAlertSetTime(msg, time) {
var createAlert3sTimeout = null;
clearTimeout(createAlert3sTimeout);
createAlert(msg);
createAlert3sTimeout = setTimeout(() => {
closeMyAlert();
}, time);
}
function createAlert(msgArr, closeFlag = false) {
if (!msgArr) return;
var myAlertBigBoxIsTrue = document.getElementById('mySmallAlertBox');
console.log(myAlertBigBoxIsTrue);
if (myAlertBigBoxIsTrue === null) {
// 創建一個遮罩層
var bigbox = document.createElement("div");
bigbox.id = "mySmallAlertBox";
//创建一个大盒子
var box = document.createElement("div");
var myspan = document.createElement('span');
bigbox.appendChild(box);
// 設置遮罩層的樣式
var bigboxName = {
"width": "100%",
"height": "100vh",
'fontSize': '18px',
"background-color": "rgba(0,0,0,0.4)",
"position": "fixed",
"top": "0",
"left": "0",
"right": "0",
"z-index": "1000",
"text-align": "center"
}
//给元素添加元素
for (var k in bigboxName) {
bigbox.style[k] = bigboxName[k];
}
//定义一个对象保存样式
var boxName = {
'minHeight': "60px",
'backgroundColor': "white",
'border': "1px solid rgb(226,222,222)",
'position': "absolute",
"box-shadow": "5px 5px 10px 2px rgba(0,0,0,0.4)",
'top': "calc(50vh - 15vw)",
"border-radius": "5px",
"left": "10px",
'padding': '20px',
"right": "10px",
'zIndex': "1001",
'textAlign': "center",
'display': 'flex',
'justifyContent': 'center',
'flexDirection': 'column',
}
//给元素添加元素
for (var k in boxName) {
box.style[k] = boxName[k];
}
//把创建的元素添加到body中
document.body.appendChild(bigbox);
//把alert传入的内容添加到box中
// 定義span樣式
var spanName = {
'wordBreak': 'break-all',
'lineHeight': '22px',
'border': '0',
'textAlign': 'center'
}
for (var j in spanName) {
myspan.style[j] = spanName[j];
}
msgArr.forEach((_, i) => {
myspan.innerHTML = _;
let clonedNode = myspan.cloneNode(true);
clonedNode.setAttribute("id", "mySmallAlertInnerSpan-" + i);
box.appendChild(clonedNode);
})
if (closeFlag) {
//创建一个关闭按钮
var button = document.createElement("button");
button.innerHTML = "X";
//定义按钮样式
var btnName = {
'border': "0px",
'backgroundColor': "transparent",
'width': "30px",
'height': "30px",
'textAlign': "center",
'lineHeight': "30px",
'color': '#6c6a6a',
"border-radius": "5px",
'outline': "none",
'position': "absolute",
'top': "2px",
'fontSize': '14px',
'right': "2px",
}
for (var j in btnName) {
button.style[j] = btnName[j];
}
//把按钮添加到box中
box.appendChild(button);
//给按钮添加单击事件
button.addEventListener("click", function() {
bigbox.style.display = "none";
var idObject = document.getElementById('mySmallAlertBox');
if (idObject != null)
idObject.parentNode.removeChild(idObject);
})
}
} else {
return;
}
}
// createAlert('test msg 01 haha haha .', 'test msg 022 haha haha ...', 'test msg 333333 haha haha .')
</script>
</body>
</html>
代码小DEMO随笔---JS原生手机版本alert弹框的更多相关文章
- JS浏览器的三种弹框：
1.alert:使用alert弹框提示信息,最后都会被转化为字符串输出(因为调用了toString这个方法).比如alert(1+1)弹出的结果应该是字符串形式的“2”. 2.Confirm:在ale ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- 一周一个小demo — vue.js实现备忘录功能
这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~ demo原git ...
- JMeter代码小Demo(Java)
一.使用Eclipse进行项目编写 1.使用eclipse,新建项目名字为:TestNumber,包名为:test,类名为:TestNum 2.在JMeter的安装目下下lib/ext中copy2个j ...
- html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果
模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...
- [转]在ASP.NET开发中容易忽略的2个小问题 Cookie乱码存取异常 和 iframe弹框的login跳转
本文转自:http://www.cnblogs.com/outtamyhead/p/3642729.html 本文地址:http://www.cnblogs.com/outtamyhead/p/364 ...
- js中的三种弹框分别是alert()，confirm()，prompt()
1.alert(): ①写在<script>标签中 ②括号中的内容为字符串或者整型 ③点击确认即可关闭,无返回值 2.confirm(): ①写在<script>标签中 ②括号 ...
- 使用JS调用手机本地摄像头或者相册图片识别二维码/条形码
接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...
- js动态加载的蒙板弹框
我们访问一些网站时总会遇到这种点击后,背景像被打上一层模板一样,这个是怎么做到的呢? 它是将这个弹框div独立于页面容器wrap,设置position为absolute,将其水平垂直之后都居中,设置弹 ...
- js存款计算器原生小demo
大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...
随机推荐
- C# String.IsNullOrEmpty()方法的使用
IsNullOrEmpty(string)是String类的一个有参的方法,方法需要类的调用,所以String.IsNullOrEmpty(string) IsNullOrEmpty是判断字符串的Nu ...
- Linux 挂载Windows共享文件夹和NAS存储
summary: [Linux 挂载共享存储] 概述 将Windows共享文件夹和NAS存储挂载至Linux. Linux系统环境:CentOS 挂载共享存储 查看外部主机共享了哪些目录 smbcli ...
- NC 使用Nginx实现https的反向代理
summary: [通过Nginx实现NCC的https访问,并解决UClient应用的问题] 1 概述 通过Nginx 安装配置反向代理,实现NC.NCC的https访问. 本文以NCC2005为例 ...
- C#在Xp系统执行.exe程序的报错怎么查看原因
我的电脑---->管理---->事件查看器----->应用程序,查看错误来源
- C++实现真值表
这一片文章主要是关于真值表,在完成之前我也遇到了许多问题.比如怎么去求解表达式的值,怎么去将每个变量进行赋值,也就是如何 将n个字符进行01全排列. 01全排列真的神奇,01全排列其实就是2^n.他可 ...
- vulnhub靶场之VIKINGS: 1
准备: 攻击机:虚拟机kali.本机win10. 靶机:DRIPPING BLUES: 1,网段地址我这里设置的桥接,所以与本机电脑在同一网段,下载地址:https://download.vulnhu ...
- 简单的WebAssembly应用搭建
1 WebAssembly简介 WebAssembly是一种新兴的Web技术,网上的资料并不是很多,简单的可以理解为让C/C++程序运行在浏览器上,官网上用四个词来描述该技术:高效.安全.开 ...
- JavaSE -进阶基础---反射技术
反射常见用法: Java 反射机制是在运行状态中,对于任意一个类,都能够获得这个类的所有属性和方法,对于任意一个对象都能够调用它的任意一个属性和方法.这种在运行时动态的获取信息以及动态调用对象的方法的 ...
- Permanently added the RSA host key for IP address '192.30.253.113' to the list of known hosts.
$git push origin master 报错: Warning: Permanently added the RSA host key for IP address '192.30.253.1 ...
- Spring Security（7）
您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 有时某些业务或者功能,需要在用户请求到来之前就进行一些判断或执行某些动作,就像在Servlet中的FilterChain过滤器所做的那样,Spr ...