弹框CSS、JS

非本人原创,此为本人导师代码,在此整理分析。

1、遮蔽层,弹框弹出时,页面变灰。

CSS部分

.overlay{display:none;position:fixed;left:0;top:0;z-index:1000;width:100%;height:100%;background-color:hsla(0, 0%, 0%, .7);}

2、定时提示小弹框,页面垂直居中显示

CSS部分

/*toast提示*/

.toast{position:fixed;top:50%;left:50%;z-index:1100;display:none;width:13em;padding:.8em 1em;background-color:hsla(0, 0%, 0%, .7);
        text-align:center;color:#fff;font-size:14px;line-height:1.3;border-radius:.5em;
        box-shadow:0 0 4px 2px hsla(0, 0%, 0%, .3);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

JS部分

/**
     * toast提示,用于提示用户信息,4秒后自动关闭,点击页面关闭
     *调用:toast(string)
     */
    toast: (function() {
        var d = document,
            ele = d.getElementById("toast"),
            isVisible = 0,     //还想不明白为什么要设置这里
            identity;

if(ele === null) {
            ele = d.createElement("div");
            ele.id = "toast";
            ele.className = "toast";
            ele.style.display = "none";
            d.body.appendChild(ele);
        }       //创建DIV

var hideFn = function() {
            if(isVisible) {
                clearTimeout(identity);
                ele.style.display = "none";
                isVisible = 0;
            }
        };

d.addEventListener("click", hideFn, true);

function show(string) {
            ele.innerHTML = string;
            ele.style.display = "block";
            isVisible = 1;
            clearTimeout(identity);
            identity = setTimeout(function() {
                ele.style.display = "none";
                isVisible = 0;
            }, 4000);

return identity;
        }

return show;
    }())
};

/**
     * 弹窗提示功能
     * dialog.show(jq)  显示弹窗
     * dialog.hide()  关闭弹窗
     */
    dialog: (function() {
        var overlay, dialog;

if($("#overlay").length > 0) {       //检查#overlay是否存在

overlay = $("#overlay");
        } else {
            overlay = $(‘<div id="overlay" class="overlay"></div>‘).appendTo($("body"));
        }

dialog = $(".dialog-box");

var show = function(jq) {
            overlay.show();
            jq.show();          //特定弹框显示
    };

var hide = function() {
            dialog.hide();              //全部弹框隐藏
            overlay.hide();
        };

dialog.find(".btn-close").on("click", function(event) {         //这是有一个十字关闭按钮
            $(event.target).parents(".dialog-box").hide(); //target 属性规定哪个 DOM 元素触发了该事件            overlay.hide();
        });

overlay.on("click", hide);                //相当于点击弹框外,弹框隐藏

return {
            show: show,
            hide: hide
        }
    }()),

时间: 2024-10-05 03:51:01

弹框CSS、JS的相关文章

AspxGridView 弹框选择器 JS

function Dictionary() { this.data = new Array(); this.put = function (key, value) { this.data[key] = value; }; this.get = function (key) { return this.data[key]; }; this.remove = function (key) { this.data[key] = null; }; this.isEmpty = function () {

js弹框3秒后自动消失

开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法.该弹框使用了jquery-ui中的draggable方法,可拖动. 目录结构如下: 下面是案例代码: demo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面

在css中vw和vh分别代表所占的百分比,可以设置最外部的容器的宽高,但是都要结合百分比一起使用. 展示 回到相关文章 ? 图片宽度(目前1024像素): 128  1024 点击我出现图片弹框 代码CSS代码:.dialog_container {    display: none;    width: 100%;    width: 100vw;    height: 100%;    height: 100vh;    background-color: rgba(0,0,0,.35); 

js组件--自定义弹框

javascript自定义弹框 性能太差,有很大的改善空间 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!--<link href="styles/reset.css" type="text/css&

css-dialog样式实现弹框蒙层全屏无需JS计算高度兼容IE7

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>css-dialog</title>  <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> </head><style type="

原生js实现拖拽弹框的效果

研究了一上午,模仿了拖拽弹框的效果,小有成就 <script type="text/javascript"> function getByClass(classname,parent){ var par=parent||document, eles=par.getElementsByTagName("*"), needArr=[]; for(var i=0;i<eles.length;i++){ if(eles[i].className==clas

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

弹出框 popover.js

弹出框 popover.js 为任意元素添加一小块浮层,就像 iPad 上一样,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 插件依赖 弹出框依赖 工具提示插件 ,因此,如果你定制了 Bootstrap,一定要注意将依赖的插件编译进去. 初始化 由于性能的原因,工具提示和弹出框的 data 编程接口(data api)是必须要手动初始化的. 在一个页面上一次性初始化所有弹出框的方式是通过 data-toggle 属性选中他们: 复制 复制 $(function

JS遮罩层弹框效果

对于前端开发者来说,js是不可缺少的语言.现在我开始把我日常积累的一些js效果或者通过搜索自己总结的一些效果分享给大家,希望能够帮助大家一起进步,也希望大家能够多多支持! 1.今天我先分享一个遮罩层弹框效果: <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <