自定义消息提示框

使用原生JavaScript简单封装的一个消息提示模态框，如果谁有更好的方式可以分享，谢谢！

<!DOCTYPE html>
<html lang="en"><head><title></title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>/* 弹窗message-dialog样式开始 */a {text-decoration: none;}.message-dialog {font-size: 1rem;position: relative;}/* 遮罩样式 */.message-dialog-conver {width: 100%;height: 100%;z-index: 100;background: rgba(0, 0, 0, 0.3);position: fixed;top: 0;left: 0;opacity: 0.3;text-align: end;}/* 主体样式 */.message-dialog-main {position: fixed;display: flex;justify-content: center;flex-direction: column;align-items: center;top: 50%;z-index: 200;width: 100%;left: 100%;-webkit-transform: translate(-100%, -100%);-moz-transform: translate(-100%, -100%);-ms-transform: translate(-100%, -100%);-o-transform: translate(-100%, -100%);transform: translate(-100%, -100%);}/* 标题样式 */.message-dialog-header {display: flex;justify-content: center;align-content: center;text-align: center;border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3);background: rgba(255, 255, 255, 255);width: 86%;height: 2rem;line-height: 2rem;border-top-left-radius: 0.6rem;border-top-right-radius: 0.6rem;}/* 内容样式 */.message-dialog-content {display: flex;justify-content: center;align-content: center;text-align: center;width: 86%;background: rgba(255, 255, 255, 255);padding: 0.5rem 0;border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3)}/* 底部样式 */.message-dialog-footer {width: 86%;height: 2.5rem;}.message-dialog-btn {width: 100%;height: 100%;background: rgba(255, 255, 255, 255);border-bottom-left-radius: 0.6rem;border-bottom-right-radius: 0.6rem;border-top: 0.01rem solid #d5d6d7;display: flex;justify-content: center;text-align: center;align-content: center;align-items: center;}.message-dialog-sure,.message-dialog-cancel {display: block;width: 10%;text-align: center;cursor: pointer;height: 2rem;line-height: 2rem;border-radius: 0.3rem;margin: 0 1rem;color: #ffff;border: none;letter-spacing: .6px;background-color: #d6d6d6;}.message-dialog-sure {color: #212122;border: none;background-color: #449d44;}.message-dialog-close {cursor: pointer;color: #347d4a;height: 2rem;line-height: 2rem;text-align: center;}</style>
</head><body><button type="button" onclick="show()">弹出</button><!-- <div class="message-dialog"><div class="message-dialog-conver">遮罩</div><div class="message-dialog-main"><div class="message-dialog-header">标题</div><div class="message-dialog-content">内容</div><div class="message-dialog-footer"><div class="message-dialog-btn"><a href="#">关闭</a><a>关闭</a></div></div></div></div> --><div id="message"></div><script>var messageDialog = {showMessage: function(options, autoHide) {this.timers = [];this.options = options || {};this.autoHide = autoHide || false;var isShow = this.options.isShow || false;var width = this.options.width || 86;var topDistance = this.options.topDistance || 50;var leftDistance = this.options.leftDistance || 93;var btn_width = this.options.btnWidth || 10;var sure = this.options.isSure || false;var html = '<div class="message-dialog-conver"></div>\<div class="message-dialog-main">\<div class="message-dialog-header">'   this.options.title   '</div>\<div class="message-dialog-content">'   this.options.content   '</div>\<div class="message-dialog-footer">\<div class="message-dialog-btn">\<!--<a class="message-dialog-sure">确定</a>-->\<!--<a class="message-dialog-cancel">取消</a>-->\</div>\</div>\</div>';//1.0 创建元素var element = document.createElement('div');element.setAttribute('class', "message-dialog");//2.0 插入元素
                element.innerHTML = html;//2.1 设置弹出框的大小
                element.querySelector(".message-dialog-main").style.width = width   '%';element.querySelector(".message-dialog-main").style.top = topDistance   '%';element.querySelector(".message-dialog-main").style.left = leftDistance   '%';//2.2 是否需要插入确认或关闭按钮if (sure) {var sureElement = document.createElement('a');sureElement.setAttribute('class', 'message-dialog-sure');// sureElement.setAttribute('href', '#');
                    sureElement.innerHTML = '确定';element.querySelector(".message-dialog-btn").appendChild(sureElement);var cancelElement = document.createElement('a');cancelElement.setAttribute('class', 'message-dialog-cancel');cancelElement.innerHTML = '取消';element.querySelector(".message-dialog-btn").appendChild(cancelElement);} else {var closeElment = document.createElement('a');closeElment.setAttribute('class', 'message-dialog-close');closeElment.innerHTML = '关闭';element.querySelector(".message-dialog-btn").appendChild(closeElment);}//2.3 设置按钮的长度var array = element.querySelectorAll(".message-dialog-btn a");for (var key in array) {if (!array.hasOwnProperty(key)) {continue;}var item = array[key];item.style.width = btn_width   '%';}//3.0 插入到页面并显示if (this.options.el) {var ele = document.getElementById(this.options.el);if (ele) {document.getElementById(this.options.el).appendChild(element);} else {document.getElementsByTagName("body")[0].appendChild(element);}} else {document.getElementsByTagName("body")[0].appendChild(element);}//4.0 是否显示if (!isShow) {element.style.display = "none";}//5.0 绑定事件if (element.querySelector('.message-dialog-sure') && element.querySelector('.message-dialog-cancel')) {element.querySelector('.message-dialog-sure').onclick = element.querySelector('.message-dialog-cancel').onclick = this.enventsFunc.bind("", this, element);} else {element.querySelector('.message-dialog-close').onclick = this.enventsFunc.bind("", this, element);}return this;},show: function() {this.cleartimers();this.options.isShow = true;document.querySelector('.message-dialog').style.display = 'block';if (this.autoHide) {var t = setTimeout(() => {this.hide();}, this.options.timeout || 3000);this.timers.push(t);}return this;},hide: function() {this.cleartimers();this.options.isShow = false;document.querySelector('.message-dialog').style.display = 'none';if (this.options.el) {var ele = document.getElementById(this.options.el);if (ele) {document.getElementById(this.options.el).removeChild(document.querySelector('.message-dialog'));} else {document.getElementsByTagName("body")[0].removeChild(document.querySelector('.message-dialog'));}} else {document.getElementsByTagName("body")[0].removeChild(document.querySelector('.message-dialog'));}},enventsFunc: function(e, doc, target) {var thisEvent = target.target;if (thisEvent.classList.contains("message-dialog-sure")) {e.options.confirm();}if (thisEvent.classList.contains("message-dialog-cancel")) {e.options.cancel();}e.hide();return false;},cleartimers: function() {if (this.timers && this.timers.length > 0) {for (var index = 0; index < this.timers.length; index  ) {var timer = this.timers[index];if (timer) {window.clearTimeout(timer);}}}}};function show() {messageDialog.showMessage({el: "message",title: "信息提示",content: "错误消息",btnWidth: 30,width: 30,topDistance: 50,leftDistance: 65,isSure: false,timeout: 3000,confirm: function() {alert("1234");},cancel: function() {},}, false).show();}</script></body></html>

 


更多专业前端知识，请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/364827.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ObjectStreamClass：监视Java对象的序列化

ObjectStreamClass：监视Java对象的序列化

ObjectStreamClass可以是有用的类&#xff0c;用于分析JVM中加载的序列化类的序列化特征。 这篇文章介绍了此类提供的有关已加载序列化类的一些信息。 ObjectStreamClass提供了两个用于查找类的静态方法&#xff1a; lookup&#xff08;class&#xff09;和lookupAny&#xff…
阅读更多...
@Transcational特性

@Transcational特性

捕获RuntimeException捕获Error并不捕获Checked Exception在方法中使用Transcational注解时候&#xff0c;通过throw new Exception&#xff08;&#xff09;&#xff0c;在发生异常的时候不会进行回滚&#xff0c;可以使用throw new RuntimeException&#xff08;&#xff09;…
阅读更多...
SpringBoot集成Thymeleaf前端模版

SpringBoot集成Thymeleaf前端模版

1、在application.properties配置文件中添加 thymeleaf 的配置信息 spring.datasource.driverClassNamecom.mysql.jdbc.Driver spring.datasource.urljdbc:mysql://localhost:3306/test spring.datasource.usernameroot spring.datasource.passwordrootspring.thymeleaf.modeHT…
阅读更多...
00005在java结果输出_Java-005-运算符详解

00005在java结果输出_Java-005-运算符详解

计算机的最基本用途之一就是执行数学运算,作为一门计算机语言Java也提供了套丰富的运算符来操纵变量, 可以把运算符分成以下几组算术运算符、关系运算符、位运算符、逻辑运算符、赋值运算符、其他运算符。①算术运算符用在数学表达式中它们的作用和在数学中的作用一样 表格中的…
阅读更多...
spring data jpa 分页查询

spring data jpa 分页查询

法一&#xff08;本地sql查询,注意表名啥的都用数据库中的名称&#xff0c;适用于特定数据库的查询&#xff09; public interface UserRepository extends JpaRepository<User, Long> {Query(value "SELECT * FROM USERS WHERE LASTNAME ?1",countQuery &…
阅读更多...
Python之递归

Python之递归

递归的意思是函数自己调用自己。递归次数&#xff1a;递归如果是死循环&#xff0c;最多执行999次。count0 def say():global countcount1print(say)print(count)say()say() #结果&#xff1a; # say # 1 # ... # say # 997 # say # RecursionError: maximum recursion depth e…
阅读更多...
使用CDI的InjectionPoint注入配置值

使用CDI的InjectionPoint注入配置值

依赖注入是用于组织类依赖的一项出色技术。 当前类中需要的所有类实例都是在运行时从DI容器提供的。 但是您的配置呢&#xff1f; 当然&#xff0c;您可以创建一个“ Configuration”类&#xff0c;并在需要它的任何地方注入该类&#xff0c;并从中获取必要的值。 但是CDI允许…
阅读更多...
LOJ.6435.[PKUSC2018]星际穿越(倍增)

LOJ.6435.[PKUSC2018]星际穿越(倍增)

LOJBZOJ 参考这儿qwq。 首先询问都是求&#xff0c;向左走的最短路。\(f[i][j]\)表示从\(i\)走到\(j\)最少需要多少步。表示这样只会\(O(n^2\log n)\)的 但是感觉能卡过\(70\)分。 注意到从\(i\)出发&#xff0c;走\(j\)步能到达的点都是一段一段的。所以不妨令\(f[i][j]\)表示…
阅读更多...
java setsession_Java Session.setServerAliveInterval方法代码示例

java setsession_Java Session.setServerAliveInterval方法代码示例

import com.jcraft.jsch.Session; //导入方法依赖的package包/类private Session startNewSession(boolean acquireChannel) throws JSchException, InterruptedException {Session newSession null;final AtomicBoolean cancelled new AtomicBoolean(false);ConnectingProgr…
阅读更多...
鼠标拖动改变DIV等网页元素的大小的最佳实践

鼠标拖动改变DIV等网页元素的大小的最佳实践

1.初次实现 1.1 html代码 <html xmlns"http://www.w3.org/1999/xhtml" xml:lang"en" lang"en"><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title>div change wid…
阅读更多...
[WC2006]水管局长

[WC2006]水管局长

水管局长 题目链接&#xff1a;https://www.luogu.org/problemnew/show/P4172#sub LCT 显然两个点的路径上的边最大要最小在该图最小生成树上 正删倒加&#xff0c;倒着做变成加边操作 加边时判断一下是否能形成更优的生成树&#xff0c;用LCT删除和连接操作即可 1 #include<…
阅读更多...
JDBC 4.0鲜为人知的Clob.free（）和Blob.free（）方法

JDBC 4.0鲜为人知的Clob.free（）和Blob.free（）方法

在会议上谈论jOOQ时&#xff0c;我总是展示此幻灯片&#xff0c;其中包含许多人们经常犯的非常常见的JDBC错误&#xff1a; 此图中的六个常见的JDBC错误 您可以找到错误吗&#xff1f; 其中一些是显而易见的&#xff0c;例如&#xff1a; 第4行&#xff1a;由于第3行的连接…
阅读更多...
反沙箱——SetErrorMode

反沙箱——SetErrorMode

目录 1.前言 2.原理讲解 3.代码实现 4.参考 1.前言 利用SetErrorMode进行反沙箱的技术&#xff0c;在2010年就有被提出&#xff0c;但是之前搜了很久都没有相关内容&#xff0c;这里简单的说一下这个反沙箱的实现。反沙箱参考GandCrab5.2。 2.原理讲解 首先讲一下SetErrorMode这…
阅读更多...
bat java 启动脚本_从bat脚本运行的Java应用程序上的Windows关闭挂钩

bat java 启动脚本_从bat脚本运行的Java应用程序上的Windows关闭挂钩

小编典典在极少数情况下&#xff0c;虚拟机可能会中止&#xff0c;即在不完全关闭的情况下停止运行。当虚拟机在外部终止时会发生这种情况&#xff0c;例如在Unix上使用SIGKILL信号或在MicrosoftWindows上使用TerminateProcess调用。因此&#xff0c;不幸的是&#xff0c;我认为…
阅读更多...
C89和C99区别--简单总结

C89和C99区别--简单总结

&#xff08;1&#xff09;对数组的增强 可变长数组　　C99中,程序员声明数组时,数组的维数可以由任一有效的整型表达式确定,包括只在运行时才能确定其值的表达式,这类数组就叫做可变长数组,但是只有局部数组才可以是变长的.可变长数组的维数在数组生存期内是不变的,也就是说,可…
阅读更多...
四、spring boot 1.5.4 日志管理

四、spring boot 1.5.4 日志管理

spring boot日志默认采用logback进行输出&#xff0c;你可以对logback进行定制化&#xff0c;方法如下&#xff1a; 在resources文件夹下建立logback.xml配置文件 <?xml version"1.0" encoding"UTF-8"?> <configuration><!-- base.xml i…
阅读更多...
使用MyBatis和Spring构建Java Web应用程序

使用MyBatis和Spring构建Java Web应用程序

这篇文章将展示如何在Spring环境中使用带有MyBatis框架的MYSQL DB创建学生注册应用程序。 这是一个简单的应用程序&#xff0c;旨在在注册期间从用户收集输入详细信息&#xff0c;将详细信息保存在MYSQL DB中&#xff0c;并在登录期间对它们进行身份验证。 1.使用Maven模板创建…
阅读更多...
codeforces 1136E-Nastya Hasn't Written a Legend

codeforces 1136E-Nastya Hasn't Written a Legend

传送门&#xff1a;QAQQAQ 题意&#xff1a;有一个数组a和一个数组k&#xff0c;数组a一直保持一个性质&#xff1a;a[i 1] > a[i] k[i]。有两种操作&#xff1a;1&#xff0c;给某个元素加上x&#xff0c;但是加上之后要保持数组a的性质。比如a[i]加上x之后&#xff0c;a…
阅读更多...
java打印word_Java jacob调用打印机打印word文档

java打印word_Java jacob调用打印机打印word文档

前面说了Java如何生成复杂的Word文档&#xff0c;今年记录下Java如何调用打印机打印word文档。起初用的是自带的PrintJob&#xff0c;但是系统提供的打印机制并不成熟完整。网上的代码也是千篇一律&#xff0c;在我的打印设备Canon iR2525/2530 UFRII LT上&#xff0c;我能获取…
阅读更多...
将Spring MVC RESTful Web服务迁移到Spring 4

将Spring MVC RESTful Web服务迁移到Spring 4

1引言 Spring 4为MVC应用程序带来了一些改进 。 在这篇文章中&#xff0c;我将重点介绍宁静的Web服务&#xff0c;并通过采用Spring 3.2实现的项目并将其升级到Spring 4来尝试这些改进。以下几点总结了本文的内容&#xff1a; 从Spring 3.2迁移到Spring 4.0 变化中的Response…
阅读更多...
最新文章

Copyright @ 2022~2023