css自学框架之消息弹框

首先我们还是看看消息弹框效果：
请添加图片描述
主要实现代码分为三部分

一、CSS部分，这部分主要是定义样式，也就是我们看到的外表，主要代码：

/* - 弹窗 */notice{top: 0;left: 0;right: 0;z-index: 10;padding: 1em;position: fixed;user-select: none;pointer-events: none;}		.myth-notice{color: var(--white);display: table;background: #333;border-radius: 3em;pointer-events: auto;margin: 0 auto 1em auto;box-shadow: 0 5px 5px -2px rgba(0, 0, 0, .2);animation: fade-small-large .3s both;-webkit-animation: fade-small-large .3s both;}		.myth-notice.remove{animation: fade-in-top .3s both reverse;-webkit-animation: fade-in-top .3s both reverse;}/* -- 弹窗颜色 */.myth-notice.red{color: var(--red-color);background: var(--red);}.myth-notice.yellow{color: var(--yellow-color);background: var(--yellow);}.myth-notice.blue{color: var(--blue-color);background: var(--blue);}.myth-notice.green{color: var(--green-color);background: var(--green);}.myth-notice > span{padding: .5em 1em;display: table-cell;vertical-align: middle;}.myth-notice .close{cursor: pointer;border-radius: 0 1em 1em 0;transition: background .3s;}.myth-notice .close:hover{background: rgba(0, 0, 0, .1);}.myth-notice .close:after{content: '×';font: inherit;}

二、JavaScript部分，这部分我们主要实现单击按钮显示根据不同输入，显示不同消息弹框，功能包括自动关闭消息弹框和手动关闭消息弹框；样式包括红色、黄色、蓝色、绿色和黑色五种消息弹框，代码如下：

; //JavaScript 弱语法的特点,如果前面刚好有个函数没有以";"结尾,那么可能会有语法错误
var myth = (function(selector) {'use strict';Array.prototype.remove = function(val) {var index = this.indexOf(val);if (index > -1) {this.splice(index, 1);}};var _myth = function(selector) {//如果默认参数不设置，自动赋值documentif (!selector) {selector = document;}//获取selector数据类型，代码后面序号1有详细用法解释var selectorType = typeof(selector);//根据selector数据类型，进行同操作,代码后面序号2有详细用法解释switch (selectorType) {case 'string': //如果是字符串类型，使用querySelectorAll获取selector对象，结果记录到reObj内var doms = document.querySelectorAll(selector); //通过该方法查找HMTL中select对象，代码后面序号2有详细用法解释//reObj是个数据对象，目前设置了两个属性：dom是Javascript数据对象，length表示doms对象数量var reObj = {dom: doms,length: doms.length};break;case 'object': //如果是object类型，结果直接记录到reObj内var reObj = {dom: [selector],length: 1};break;default: //除了上述两种类型外，其它返回null对象return null;}reObj.__proto__ = mythExtends;//__proto__：表示一个对象拥有的内置属性，是JS内部使用寻找原型链的属性。可以理解为它是一个指针，用于指向创建它的函数对象的原型对象prototype（即构造函数的prototype），简单理解为“为reObj添加了一些扩展属性，myth(selector)选择对象后，可以进一步执行mythExtends中的方法。return reObj;};//myth(selector)对象的扩展方法var mythExtends = {		create:function(tag,prop){var obj=document.createElement(tag)//alert(prop)if (prop) {if(prop.id)    obj.id = prop.id;if(prop.src)   obj.src = prop.src;if(prop.href)  obj.href = prop.href;if(prop.class) obj.className = prop.class;if(prop.text)  obj.innerText = prop.text;if(prop.html)  obj.innerHTML = prop.html;if(prop.parent) prop.parent.appendChild(obj);;}return obj;},showInfo:function(content, attr){if(!document.querySelector("body > notice")){this.create('notice',{parent:document.body});}var item = this.create("div", {class: "myth-notice", html: "<span class='content'>" + content + "</span>",parent:document.querySelector("body > notice")});if(attr && attr.color){item.classList.add(attr.color);}if(attr && attr.time){setTimeout(this.notice_remove.bind(null,item), attr.time)}else{				var close = this.create("span", {class: "close", parent: item});var that = this;close.onclick = function(e){that.notice_remove(item);}}},notice_remove:function(item){item.classList.add("remove");if(document.querySelector("body > notice")){item.remove()}},infoTip:function(content, attr){var that = this;this.click(function(){that.showInfo(content,attr);});},/* dom 元素遍历 */each: function(callBack) {if (!callBack) {return;}for (var i = 0; i < this.length; i++) {this.dom[i].index = i;callBack(this.dom[i]); //返回每一个dom对象}},// 设置或读取htmlhtml: function(html) {if (this.length < 1) {return this;}//设置HTMLif (typeof(html) != 'undefined') {for (var i = 0; i < this.length; i++) {this.dom[i].innerHTML = html;}return this;}//读取HTMLtry {return this.dom[0].innerHTML;} catch (e) {return null;}},/*读取或设置属性开始*/attr: function(attrName, val) {if (val) {this.setAttr(attrName, val);} else {return this.getAttr(attrName);}},getAttr: function(attrName) {try {return this.dom[0].getAttribute(attrName);} catch (e) {console.log(_lang.domEmpty);return null;}},setAttr: function(attrName, val) {for (var i = 0; i < this.length; i++) {this.dom[i].setAttribute(attrName, val);}return this;},/*读取或设置属性结束*//* 样式操作开始 */css: function(csses) {for (var i = 0; i < this.length; i++) {var styles = this.dom[i].style;for (var k in csses) {styles[k] = csses[k];}}return this;},hasClass: function(cls) {if (this.length != 1) {return false;}return this.dom[0].className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));},addClass: function(cls) {for (var i = 0; i < this.length; i++) {if (!this.dom[i].className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))) {this.dom[i].className += " " + cls;}}return this;},removeClass: function(cls) {var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');for (var i = 0; i < this.length; i++) {this.dom[i].className = this.dom[i].className.replace(reg, ' ');}return this;},/* 样式操作结束 */// 隐藏元素。isAnimate为真，动画方式隐藏元素hide: function(isAnimate) {for (var i = 0; i < this.length; i++) {if (isAnimate) {var ctdom = myth(this.dom[i]);ctdom.addClass('myth-fade-out');setTimeout(function() {ctdom.dom[0].style.display = 'none';ctdom.removeClass('myth-fade-out');}, 300);} else {this.dom[i].style.display = 'none';}}return this;},// 显示元素 isAnimate为真，动画方式显示元素show: function(isAnimate) {for (var i = 0; i < this.length; i++) {if (isAnimate) {var ctdom = _myth(this.dom[i]);ctdom.addClass('myth-fade-in');setTimeout(function() {ctdom.dom[0].style.display = 'block';ctdom.removeClass('myth-fade-in');}, 300);} else {this.dom[i].style.display = 'block';}}return this;},// 单击事件click: function(callBack) {for (var i = 0; i < this.length; i++) {if (callBack == undefined) {_myth(this.dom[i]).trigger('click');}this.dom[i].addEventListener('click', callBack);}},setWidth: function(swidth) { //设置myth(selector)对象宽度this.dom[0].style.width = swidth;},getWidth: function() { //获取myth(selector)对象宽度return this.dom[0].offsetWidth;},setHeight: function(sheight) { //设置myth(selector)对象高度this.dom[0].style.height = sheight;},getHeight: function() { //获取myth(selector)对象高度return this.dom[0].offsetHeight;},appendChild:function(aobject){this.dom[0].appendChild(aobject);},config:function(opts, options) {//默认参数if (!opts) return options;for (var key in opts) {if (!!opts[key]) {options[key] = opts[key];}}return options;}}_myth.version = 'myth 1.0'; //设置版本return _myth;
})(document);

三、HTML部分，该部分就是如何使用第一、二部分的代码。

一是引入CSS代码，引入JavaScript代码。

<link rel="stylesheet" href="css/myth.css">
<script src="js/myth.js"></script>

二是THML展示代码

<div class="mythBox mid"><br/>手动关闭的提示信息：<button class="btn red" id="infoTrip1">红色信息提示</button><button class="btn blue" id="infoTrip2">红色信息提示</button><button class="btn green" id="infoTrip3">红色信息提示</button><button class="btn yellow" id="infoTrip4">红色信息提示</button><button class="btn " id="infoTrip5">默认消息提示</button><br/><br/>自动关闭的提示信息：<button class="btn blue" id="infoTrip6">自动关闭信息提示</button></div>

三是JavaScript调用代码。

<script type="text/javascript">myth('#infoTrip1').infoTip('数据加载完毕....',{color:'red'});myth('#infoTrip2').infoTip('数据加载完毕....',{color:'blue'});myth('#infoTrip3').infoTip('数据加载完毕....',{color:'green'});myth('#infoTrip4').infoTip('数据加载完毕....',{color:'yellow'});myth('#infoTrip5').infoTip('数据加载完毕....');myth('#infoTrip6').infoTip('数据加载完毕....',{color:'blue',time:3000});
</script>

ok，这样就完成了。
源代码下载：请单击

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

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

相关文章

【VUE】数字动态变化到目标值-vue-count-to

【VUE】数字动态变化到目标值-vue-count-to

vue-count-to是一个Vue组件&#xff0c;用于实现数字动画效果。它可以用于显示从一个数字到另一个数字的过渡动画。 插件名&#xff1a;vue-count-to 官方仓库地址&#xff1a;GitHub - PanJiaChen/vue-countTo: Its a vue component that will count to a target number at a…
阅读更多...
Python 的画图函数 seaborn 简介

Python 的画图函数 seaborn 简介

seaborn 简介 seanborn 是 Python 的另外一个常用工具包&#xff0c;它基于 matplotlib&#xff0c;但画出的图形更加美观些&#xff0c;并且与 Pandas 的数据类型结合地较好。 # Import seaborn import seaborn as sns import matplotlib.pyplot as plt# Apply the default …
阅读更多...
最佳实践：TiDB 业务读变慢分析处理

最佳实践：TiDB 业务读变慢分析处理

作者&#xff1a;李文杰 网易游戏计费 TiDB 负责人 在使用或运维管理 TiDB 的过程中&#xff0c;大家几乎都遇到过 SQL 变慢的问题&#xff0c;尤其是查询相关的读变慢问题。读变慢的问题大部分情况下都遵循一定的规律&#xff0c;通过经验的积累可以快速的定位和优化&#xff…
阅读更多...
数字货币量化交易平台

数字货币量化交易平台

数字货币量化交易平台是近年来金融科技领域迅速崛起的一种创新型交易方式。它通过应用数学模型和算法策略&#xff0c;实现对数字货币市场的自动交易和风险控制。然而&#xff0c;要在这个竞争激烈的领域中脱颖而出&#xff0c;一个数字货币量化交易平台需要具备足够的专业性&a…
阅读更多...
基于 Docker 的 MySQL 主从复制搭建（Mac M1版本）

基于 Docker 的 MySQL 主从复制搭建（Mac M1版本）

系统&#xff1a;Macbook M1 镜像版本&#xff1a;mysql:5.7 如果是要查 slave连接不上 master的问题&#xff0c;可以直接跳到文章末尾踩坑处 准备工作 拉取镜像 docker pull mysql:5.7本地数据卷挂载 因为mysql不挂载的话&#xff0c;重启丢失数据&#xff0c;所以在本地创…
阅读更多...
QLabel控件使用

QLabel控件使用

Qt为我们应用程序界面开发提供的一系列的控件&#xff0c;下面我们介绍两种最常用一些控件&#xff0c;所有控件的使用方法我们都可以通过帮助文档获取。 1.QLabel控件使用 QLabel是我们最常用的控件之一&#xff0c;其功能很强大&#xff0c;我们可以用来显示文本&#xff0c…
阅读更多...
《安富莱嵌入式周报》第321期：开源12导联便携心电仪，PCB AI设计，150M示波器差分探头，谷歌全栈环境IDX，微软在Excel推出Python

《安富莱嵌入式周报》第321期：开源12导联便携心电仪，PCB AI设计，150M示波器差分探头，谷歌全栈环境IDX，微软在Excel推出Python

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版&#xff1a; https://www.bilibili.com/video/BV1ju4y1D7A8/ 《安富莱嵌入式周报》第321期&#xff1a;开源12导…
阅读更多...
打破数据孤岛！时序数据库 TDengine 与创意物联感知平台完成兼容性互认

打破数据孤岛！时序数据库 TDengine 与创意物联感知平台完成兼容性互认

新型物联网实现良好建设的第一要务就是打破信息孤岛&#xff0c;将数据汇聚在平台统一处理&#xff0c;实现数据共享&#xff0c;放大物联终端的行业价值&#xff0c;实现系统开放性&#xff0c;以此营造丰富的行业应用环境。在此背景下&#xff0c;物联感知平台应运而生&#…
阅读更多...
入职字节外包一个月，我离职了

入职字节外包一个月，我离职了

有一种打工人的羡慕&#xff0c;叫做“大厂”。 真是年少不知大厂香&#xff0c;错把青春插稻秧。 但是&#xff0c;在深圳有一群比大厂员工更庞大的群体&#xff0c;他们顶着大厂的“名”&#xff0c;做着大厂的工作&#xff0c;还可以享受大厂的伙食&#xff0c;却没有大厂…
阅读更多...
学习JAVA打卡第四十五天

学习JAVA打卡第四十五天

StringBuffer类 StringBuffer对象 String对象的字符序列是不可修改的&#xff0c;也就是说&#xff0c;String对象的字符序列的字符不能被修改、删除&#xff0c;即String对象的实体是不可以再发生变化&#xff0c;例如&#xff1a;对于 StringBuffer有三个构造方法&#xff…
阅读更多...
程序与进程

程序与进程

一、程序是怎么被执行的 1.在程序中&#xff0c;由引导代码去调用程序中得main函数&#xff0c;而这个过程由链接器完成&#xff0c;链接器将引导代码链接到我们的应用程序构成可执行文件。 2.程序运行需要通过操作系统的加载器来实现&#xff0c;加载器是操作系统中的程序&a…
阅读更多...
界面控件Telerik UI for WPF——Windows 11主题精简模式提升应用体验

界面控件Telerik UI for WPF——Windows 11主题精简模式提升应用体验

Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序&#xff0c;同时还能快速构建企业级办公WPF应用程序。Telerik UI for WPF支持MVVM、触摸等&#xff0c;创建的应用程序可靠且结构良好&#xff0c;非常容易维护&#xff0c;其直观的API将无缝地集成Visua…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023