Js简朴原生实现弹框

<!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>弹出框</title><style>#main {width: 100%;height: 700px;background-color: rgba(82, 82, 87, 0.5);display: flex;justify-content: center;align-items: center;position: absolute;left: 0;top: 0;display: none;}#box {width: 500px;height: 300px;background-color: rgb(255, 255, 255);position: absolute;/* z-index: 999; */}a {text-decoration: none;color: black;float: right;padding-top: 10px;margin-right: 10px;}p {margin-top: 50px;font-size: 30px;}#box1 {width: 496px;height: 50px;border: 2px solid black;}#box2 {width: 0px;height: 50px;background-color: pink;}</style>
</head><body><input type="button" value="弹框" id="eject"><div id="main"><div id="box"><a href="#" id="stopIt">X</a><p>弹出框</p><div id="box1"><div id="box2"></div></div></div></div><script>let eject = document.getElementById("eject");let main = document.getElementById("main");let stopIt = document.getElementById("stopIt");let box2 = document.getElementById("box2");let timeIn;//点击出现弹框eject.onclick = function () {main.style.display = "flex";box2.style.width = "0px";//进度条timeIn = setInterval(() => {box2.style.width = parseInt(box2.style.width || 0) + 10 + "px";console.log(box2.style.width);if (parseInt(box2.style.width) >= 498) {main.style.display = "none";clearInterval(timeIn);                    }}, 200);}//点击×弹框消失stopIt.onclick = function () {main.style.display = "none";box2.style.width = "0px";clearInterval(timeIn);}</script>
</body></html>

Js简朴原生实现弹框相关推荐

js原生alert弹框美化
1.说明通过自定义方式美化弹框,使用alert弹框错误提示 2.示例 html代码片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
用js来实现自定义弹框
前言:个人作业上传(大家可参考但不可转载),实现将弹框的样式统一封装在一个对象中方便后续的修改. <!DOCTYPE html> <html lang="en"& ...
基于vue3原生地图弹框嵌入vue3模板
vue3 中地图弹框引用组件模板: 项目中使用vue3往往会引用地图组件,或地图框架,往往会在地图弹框嵌入自己想要的模板,例如mapbox弹框引用echarts和element-plus组件问题描述 ...
js 关闭页面时弹框提醒
关闭页面时弹框提醒在做vue项目时一个可编辑的详情页面需要在离开它的时候,根据页面是否改动的情况来判断是否要离开页面,一开始我只是在beforeRouteLeave里面调用的==window.con ...
vue通过js里调用定义弹框
定义弹窗register.vue <template><el-dialog title="注册信息" :visible.sync="dialogVisi ...
ios wkwebview弹框_iOS 加载WKWebView
WKWebView是苹果在iOS 8之后推出的框架WebKit中的浏览器控件, 其加载速度比UIWebView快了许多, 但内存占用率却下降很多, 也解决了加载网页时的内存泄露问题. WKWebVie ...
安卓仿Toasty消息弹框
Toast是安卓非常常用的消息弹框之一,但是原生的弹框过于朴素,无法适应不同场景的样式需求,因此设计一个类似于Toasty的弹框构建工具. 不废话直接上代码 import android.conten ...
JavaScript的三种弹框
js的三种弹框 js分别有三种弹框,分别是警告框.确认框.对话框警告框 alert() alert("你卡余额已不足,请及时充钱!!!") 效果确认框 confirm() co ...
【原生JS】仿新浪微博名片弹框
[原生JS]仿新浪微博名片弹框博客已经搬家地址:http://cm2009.sinaapp.com/ 第一次用原生JS写小功能,有很多不足的地方,例如事件绑定没有使用事件委托功能,而是直接用零级D ...

Js简朴原生实现弹框

Js简朴原生实现弹框

Js简朴原生实现弹框相关推荐

最新文章

热门文章