页面弹窗toast和加载loading

更新日期: 2019-04-07阅读: 2k标签: 弹窗

都采用单例模式,原生js实现

兼容老版本浏览器内核,请将用es6语法的地方作修改


loading 加载

代码: 样式全部通过js创建style标签注入head中,若需修改,请修改loadignStyle和loadignChildStyle 的值即刻。

const loading = (() => {
    let loadingEle  = null
    return (status) => {
        if(!loadingEle) {
            const divEle = document.createElement('div')
            const styleEle = document.createElement('style')
            // 底部遮罩样式
            const loadignStyle = '.loading{position: fixed;z-index: 1000;left: 0;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0, .6)}'
            // loading动画样式
            const loadignChildStyle = '.loading div{position: absolute;width: 30px;height: 30px;top: 50%;left: 50%;margin: -15px 0 0 -15px;border: 1px solid #fff;border-right: 1px solid transparent;border-radius: 50%;animation: loading 1s linear infinite;}'
            divEle.setAttribute('class', 'loading')
            divEle.innerHTML = '<div></div>'
            styleEle.innerHTML = `${loadignStyle} ${loadignChildStyle} @keyframes loading {to {transform: rotate(360deg)}}`
            document.querySelector('head').append(styleEle)
            document.querySelector('body').append(divEle)
            loadingEle = divEle
        } else {
            // 控制loading的显示与隐藏
            const dispalyStatus = status ? 'block': 'none';
            loadingEle.setAttribute('style', `display:${dispalyStatus}`)
        }
    }
})()

任意可调用loading函数的地方调用即刻;显示传入参数true,不显示不传参数或传false。


toast 弹窗

const toast = (() => {
    let once = null
    let clearTime
    return (text, time) => {
        if(!time || time<1000 ) time = 1500
        const updata = () => {
            once.innerHTML = text || ''
            once.setAttribute('style', 'position: fixed;left: 50%;z-index: 9000;max-width: 300px;padding: 5px 12px;-webkit-transform: translateX(-50%);text-align: center;border-radius: 4px;font-size: 14px;color: #fff;background-color: rgba(0,0,0,0.6);')
            clearTime = setTimeout(() => {
                once.setAttribute('style', 'display:none')
                clearTimeout(clearTime)
            }, time);
        }
        if(!once) {
            const bodyEle = document.querySelector('body')
            const div = document.createElement('div');
            bodyEle.appendChild(div)
            once = div
            updata()
        } else {
            updata()
        }
    }
})()

参数:text(弹窗文本) time(显示时常) 时间默认或小于1000时设置为1500毫秒

任意可调用的地方调用 toast 方法即可

欢迎交流 Github


链接: https://www.fly63.com/article/detial/2720

浏览器的三种Js弹窗方式

在做网页时,常常使用弹窗,以上就是浏览器的三种弹窗方式, alert 在测试时常用; confirm 可以套用if...else 来用 ,比如 :confirm点击了确定做什么事情,点击了取消又做什么事情;prompt 弹窗输入 ; 可以给网页设置密码。

搞懂extend和$mount原理并实现一个命令式Confirm弹窗组件

如每个使用的地方需要引入该组件,需要注册,需要给组件加ref引用,需要调用事件来控制状态。其实这个组件相对来说是比较独立的,我们在使用组件库的时候

优秀好看的弹窗界面设计

不管是用户还是设计师角色,弹窗界面应该都是经常能碰到的。弹窗(pop-up)能够让用户更聚焦,不用离开当前页面便能轻松快速地完成任务。 但是千篇一律的界面设计很容易让人忽略了它本身的美感。

弹窗和 window 的方法

弹窗自古以来就存在。最初的想法是,在不关闭主窗口的情况下显示其他内容。目前为止,还有其他方式可以实现这一点:我们可以使用 fetch 动态加载内容,并将其显示在动态生成的 <div> 中。弹窗并不是我们每天都会使用的东西。

javaScript实现弹窗拖动

通过原生javaScript进行窗口拖动的实现,通过javaScript实现自定义容器的拖动操作,通过拖动标题部分进行窗口的移动

html5 dialog弹窗的使用介绍

说起 dialog 标签,可能很多人都比较陌生,毕竟这个标签直到 HTML5.2 标准固定,也只是 chrome 的浏览器才支持的,那至于该标签的用处,根据语义也可以很明显的理解到,会话

别再用alert()做弹窗了,浏览器自带的系统级模态框太好用了!

在很多场景下,都需要弹窗用于交互,一般UI框架都有模态框,如果你做一个小单页,不引入UI库,你将无法使用模态框,或者使用JavaScript自带的alert弹出提醒,或者是自己写,这都不是很便利。

vue3优雅的使用useDialog

在日常开发时,弹窗是一个经常使用的功能,而且重复性极高,你可能会遇到下面这些问题:1、一个页面内多个弹窗, 要维护多套弹窗状态,看的眼花缭乱2、弹窗内容比较简单,声明变量 + 模板语法的方式写起来比较麻烦

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!