弹窗插件

最新推荐文章于 2025-07-22 23:56:31 发布
最新推荐文章于 2025-07-22 23:56:31 发布
阅读量135 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/3288561/blog/1499222 

/************************
 * name : layer-drag.js
 * version : 1.0
 * author : GrearWall
 * date : 2017-07-31
 * support : IE9+
 ***********************/

/*  //How to use
    <button style="display:block;margin:1000px auto 100px;padding:10px 30px;" onclick="a()">点击弹窗</button>
    <div id="aaa" style="width:450px;height:400px;margin:auto;background:#ddd;display: none;">内容区域</div>
    <script>
        function a(){
            layerDrag.layerModel({
                msg:"访问服务器失败！",
                el:"#aaa",
                width:500,
                height:500,
                title:"模态框",
                noDrag:true,
                buttons:[{label:"确定",callback:function(){
                    layerDrag.layerModel({
                        msg:"访问服务器失败！",
                        //buttons:["确定"]
                    },function(){
                        console.log("提示框已经创建完成！");
                    }); 
                }},{label:"取消",callback:function(){
                    layerDrag.layerModel({
                        msg:"取消",
                    });
                }},{label:"一半确定一半取消",callback:function(){
                    layerDrag.layerModel({
                        msg:"一半确定一半取消",
                    });
                }}]
            },function(){
                console.log("模态框已经创建完成！");
                console.log(this);
                var pgfx_chart1=echarts.init(document.getElementById('aaa'));
                pgfx_chart1.setOption(option);
            });
        }

        var option = {
            backgroundColor: '#2c343c',
            title: {
                text: 'Customized Pie',
                left: 'center',
                top: 20,
                textStyle: {
                    color: '#ccc'
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:274, name:'联盟广告'},
                        {value:235, name:'视频广告'},
                        {value:400, name:'搜索引擎'}
                    ].sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };
    </script>
 */

var layerDrag = {
    addEventHandler : function (target,type,fn){    //bind event function
        if(target.addEventListener){    //W3C
            target.addEventListener(type,fn);
        }else if(target.attachEvent){   //IE
            target.attachEvent("on"+type,fn);
        }
     },
     removeEventHandler : function (target,type,fn){   //unbind event function
        if(target.removeEventListener){
            target.removeEventListener(type,fn);
        }else{
            target.detachEvent(type,fn);
        }
     },
     preventDefault : function (event){ //prevent defalut event
         var e = event || window.event;
        if(event.preventDefault){   //W3C
            e.preventDefault();
        }else{  //IE
            e.returnValue = false;
        }
     },
     stopPropagation : function (event){    //stop propagation event
         var e = event || window.event;
         if(e.stopPropagation){ //W3C
             e.stopPropagation();
         }else{ //IE
             e.canceBubble = true;
             return false;
         }
     },
     getInnerClient : function (){  //get window client size
         if(window.innerWidth){ //W3C
            return {
                width:window.innerWidth,
                height:window.innerHeight
            }
         }else{ //IE
             return {
                 width:document.documentElement.clientWidth,
                 height:document.documentElement.clientHeight
             }
         }
     },
     mouseHover : function (obj,enter,leave){
        obj.onmouseenter = enter;
        obj.onmouseleave = leave;
     },
     getElement : function (el){
        if(typeof el === "string"){
            if(el.indexOf("#") == 0){
                return document.getElementById(el.replace("#",""))
            }else if(el.indexOf(".") == 0){
                return document.getElementsByClassName(el.replace(".",""))
            }else{
                return document.getElementsByTagName(el)
            }
        }
     },
     creatDOM : function (attr,tag){
        var el = document.createElement(tag);
        for(i in attr){
            el.setAttribute(i,attr[i]);
        }
        return el;
     },
     setCSS : function (target,cssObj){
        for(i in cssObj){
            target.style[i] = cssObj[i]
        }
     },
     layerModel : function (options,callback){   //drag layer model
        var _this = this;
        _this.options = options;
        _this.bulidLayerModel(options);   //creat layer model
        var modelHead = _this.getElement("#modelHead"),
            modelContainer = _this.getElement("#modelContainer"),
            maxW = _this.getInnerClient().width - modelContainer.offsetWidth,
            maxH = _this.getInnerClient().height - modelContainer.offsetHeight,
            isDrag = false; //Flag for dragable
        //init layer model position
        modelContainer.style.left = (maxW/2) + "px";
        modelContainer.style.top = (maxH/3) + "px";
        modelContainer.style.opacity = 1;
        modelContainer.style.filter = "alpha(opacity=100)";
        layerDrag.currentScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        document.documentElement.scrollTop = window.pageYOffset = document.body.scrollTop = 0;
        document.body.style.overflow = "hidden";
        _this.addEventHandler(window,"resize",function(){
            var maxW = _this.getInnerClient().width - modelContainer.offsetWidth,
                maxH = _this.getInnerClient().height - modelContainer.offsetHeight;
            modelContainer.style.left = (maxW/2) + "px";
            modelContainer.style.top = (maxH/3) + "px";
        });
        //bind close event
        var headClose = _this.getElement("#headClose");
        headClose.onclick = _this.closelayerModel;
        //drag by mousedown first
        if(!options.noDrag){
            modelHead.onmousedown = function(e){
                modelContainer.style.transition = null;
                x = e.clientX - modelContainer.offsetLeft;
                y = e.clientY - modelContainer.offsetTop;
                isDrag = true;
                document.onmousemove = function(e){
                    if(isDrag){
                        var left = e.clientX - x,
                            top = e.clientY - y;
                        //cancle select element and text
                        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 
                        if(left < 0){   //left overflow
                            left = 0;
                        }else if(left > maxW){  //right overflow
                            left = maxW;
                        };
                        if(top < 0){    //top overflow
                            top = 0;
                        }else if(top > maxH){   //bottom overflow
                            top = maxH;
                        }
                        modelContainer.style.left = left + "px";
                        modelContainer.style.top = top + "px";
                    }
                }
            }
            document.onmouseup = function(){    //clear draging when mouseup
                isDrag = false;
                // modelHead.onmousedown = null;
                document.onmousemove = null;
            }
        }else{
            modelHead.style.cursor = "default";
        }
        if(typeof callback === "function"){
            callback.apply(this, arguments);
        }
    },
    closelayerModel : function (callback){  //close layer model and remove it from document
        var modelContainer = layerDrag.getElement("#modelContainer");
        var modelLayer = layerDrag.getElement("#modelLayer");
        if(layerDrag.options.el){
            var target = layerDrag.getElement(layerDrag.options.el);
            target.style.display = "none";
            document.body.appendChild(target);
        }
        document.body.removeChild(modelContainer);
        document.body.removeChild(modelLayer);
        document.body.style.overflow = "auto";
        document.documentElement.scrollTop = window.pageYOffset = document.body.scrollTop = layerDrag.currentScrollTop;
        typeof callback === "function" ? callback() : null;
    },
    bulidLayerModel : function (options){   //creat DOM
        var _this = this;
        //handle arguments
        var width = options.width || 300,
            height = options.height || 160,
            msg = options.msg,
            el = options.el,
            title = options.title || "提示信息",
            buttons = options.buttons;
        //creat Mask
        var modelDom = _this.creatDOM({"id":"modelLayer"},"div");
        modelDom.style.cssText = "width:100%;height:100%;\
                                position:absolute;top:0;left:0;z-index:999998;\
                                background:#000;opacity:0.5;filter:alpha(opacity=60)";
        document.body.appendChild(modelDom);
        //creat layer model container
        var modelDiv = _this.creatDOM({"id":"modelContainer"},"div");
        modelDiv.style.cssText = "width:"+width+"px;height:"+height+"px;position: absolute;overflow:hidden; border: 1px solid #ccc;\
                                 transition:top 1s,opacity 1s;top:0;opacity:0;filter:alpha(opacity=0);border-radius: 6px;background: #fff;\
                                 z-index: 999999;box-shadow: #999 0 0 20px;font-size:14px;color:#666;";
        document.body.appendChild(modelDiv);
        //creat layer model head
        var modelHead = _this.creatDOM({"id":"modelHead"},"div");
        modelHead.innerHTML = title;
        modelHead.style.cssText = "width:100%;height:35px;text-indent:1.5em;background:#f2f2f2;border-bottom:1px solid #ddd;cursor:move;line-height:35px;";
        modelDiv.appendChild(modelHead);
        //creat head close button
        var headClose = _this.creatDOM({"id":"headClose"},"div");
        headClose.innerHTML = "×";
        headClose.style.cssText = "float:right;width:50px;line-height:34px;font-size:24px;text-align:center;text-indent:0;cursor:pointer;";
        modelHead.appendChild(headClose);
        //creat content
        var modelContent = _this.creatDOM({"id":"modelContent"},"div");
        modelContent.style.cssText = "width:100%;padding:10px;text-align:center;box-sizing:border-box;";
        modelDiv.appendChild(modelContent);
        if(el){
            var msgChild = _this.getElement(el);
            msgChild.style.display = "block";
            modelContent.appendChild(msgChild);
            modelContent.style.height = buttons ? (height - 75) + "px" : (height - 40) + "px";
            modelContent.style.overflow = "hidden";
        }else{
            modelDiv.style.transition = "top 1s,opacity 1s";
            modelDiv.style.top = null;
            modelContent.innerHTML = msg;
            modelContent.style.lineHeight = buttons ? (height - 90) + "px" : (height - 70) + "px";
        }

        if(buttons && buttons instanceof Array){
            var modelFooter = _this.creatDOM({"id":"modelFooter"},"div");
            modelFooter.style.cssText = "clear:both;text-align:center;padding:0 10px;overflow:hidden;";
            modelDiv.appendChild(modelFooter);
            buttons.map(function(item,index){
                var btn = _this.creatDOM({"class":"bottomBtn"},"div");
                if(typeof item === "string"){
                    btn.innerHTML = item;
                    btn.onclick = _this.closelayerModel;
                }else if(typeof item === "object"){
                    btn.innerHTML = item.label;
                    btn.onclick = function(){
                        _this.closelayerModel(item.callback);
                    } 
                }
                btn.style.cssText = "float:right;padding:4px 18px;border-radius:3px;border:1px solid #ddd;\
                                    background:none;cursor:pointer;margin:0 5px;";
                _this.mouseHover(btn,function(){
                    _this.setCSS(this,{
                        "background" : "#2CBBE3",
                        "borderColor" : "#2CBBE3",
                        "color" : "#fff"
                    });
                },function(){
                    _this.setCSS(this,{
                        "background" : "none",
                        "borderColor" : "#ddd",
                        "color" : "#666"
                    });
                });
                modelFooter.appendChild(btn);
            });
        }
    }
};

 

转载于:https://my.oschina.net/u/3288561/blog/1499222

chouzhan9715
关注
ECharts 饼图实现自定义标签包含图标icon（圆形图标，矩形图标）
旭东怪的博客
10-22 4852
1 原始效果图 2 实现代码 <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.
OpenLayers官方示例详解三：Drag, Rotate, and Zoom
不睡觉的怪叔叔的博客
10-08 3435
一、示例简介     这个示例实现了按键Shift加上鼠标拖拽来围绕中心点旋转和缩放地图的功能 二、代码详解     首先了解一下本示例将用到的ol.interaction.DragRotateAndZoom类。     ol.interaction.DragRotateAndZoom控件允许用户通过鼠标点击和拖拽来缩放和旋转地图，默认情况下，该控件仅限于按住Shift键时起作用。   ...
改造DragLayer 实现的控件随意拖动, 以及贴边效果
weixin_33711647的博客
06-07 824
2019独角兽企业重金招聘Python工程师标准>>> ...
Obiee+echarts实例之饼图（2）
u012451141的博客
11-10 229
一、效果图 1、这是用Obiee + echarts做出来的饼图，效果如图： 2、数据（仅供参考），如图：   二、代码解析 //前缀 &lt;!-- 引入 ECharts 文件 --&gt; &lt;scriptsrc="/analyticsRes/echarts/dist/echarts.js"&gt;&lt;/script&gt; &lt;!-- 为EC...
ECharts 饼图
qq_61324603的博客
03-06 477
饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要 xAxis，yAxis。echarts绘制嵌套式饼图，需要设置series.type为’pie’，并设置不同的series.radius和series.center来控制每个饼图的大小和位置。可以通过设置参数 roseType: 'angle' 显示。1、第一个简单的饼图。
wordpress使用popup弹窗插件的对比
shuanghusun的专栏
10-09 1257
最重要的是，它还有许多其他功能，包括重定向确认、onClick 弹出窗口、多种动画效果、支持 3rd 方插件等等。是免费提供的最好的 WordPress 弹出插件。许多网站严重依赖销售收入，但由于各种因素，大多数访问者会在没有购买的情况下离开您的网站。它有许多自定义选项，包括视频灯箱、无限制的弹出窗口、翻译、可自定义的 YouTube 设置（开始时间、结束时间、禁用相关视频）等等。这可能是您让他们订阅您的电子邮件订阅的最后机会，因此请充分利用它。他们在您的网站上停留的时间越长，他们购买东西的可能性就越大。
实现全屏显示的JQuery弹窗插件使用指南
weixin_35728286的博客
05-20 1059
在现代网页开发领域，JQuery已经成为了众多开发者不可或缺的工具。它是一个快速、小巧、功能丰富的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互的编程工作，极大地提高了开发效率。通过JQuery，开发者能够以更少的代码和更少的时间完成复杂的网页操作。在本章节中，我们将深入探讨JQuery的基本概念、它如何简化常见的前端开发任务，并了解它在构建网页应用中所扮演的关键角色。
uni-app双弹窗插件
11-22
uni-app双弹窗插件是一种专为uni-app开发框架设计的软件插件，它能够帮助开发者在应用中实现双弹窗功能，提升用户交互体验。uni-app是一个使用Vue.js开发所有前端应用的框架，可以编译到iOS、Android、以及各种小...
子比主题VIP会员入群验证弹窗插件源码
12-15
【标题】"子比主题VIP会员入群验证弹窗插件源码" 是一款专为WordPress用户设计的扩展功能，旨在提升网站的会员管理与用户体验。这个插件的核心功能是当VIP会员访问特定页面或进行特定操作时，会触发一个弹窗验证过程...
实用的hsycmsAlert弹窗插件.rar
10-01
【hsycmsAlert弹窗插件】是一款针对网页交互设计的实用工具，它基于JavaScript库jQuery构建，并结合了CSS特效，能够为网站提供各种类型的提示和警告弹窗。这款插件设计灵活，允许开发者根据需求进行二次修改，以适应...
带悬停效果的Alert弹窗插件.rar
10-01
"带悬停效果的Alert弹窗插件.rar"提供了一种实现这种效果的方法，它结合了jQuery、CSS和网页特效的技术，使得弹窗在鼠标悬停时呈现出独特的互动体验。下面我们将详细探讨这些知识点。 1. **jQuery特效**： jQuery...
CSS3的transition属性
简生的代码备忘录
06-07 2104
transition ：CSS3动画属性 更详细的内容去: http://www.w3cplus.com/content/css3-transition transition主要包含四个属性值：     执行变换的属性： transition-property ： none | all | [ ] [ ',' ]*     变换延续的时间：单位s
写个 flask todo app，简洁，实用
waterHBO的博客
07-22 1242
这是一个基于 Flask 框架开发的现代化 Todo 应用，专为个人任务管理而设计。应用采用简洁的界面设计和直观的操作方式，帮助用户高效管理日常任务。这个 Flask Todo 应用虽然功能简洁，但涵盖了任务管理的核心需求。它不仅是一个实用的工具，也是学习 Flask 全栈开发的优秀示例。无论是个人使用还是作为学习项目，都具有很好的实用价值。项目代码结构清晰，易于理解和扩展，是 Web 开发初学者和有经验开发者的理想选择。
xss漏洞
peach_TT的博客
07-22 948
恶意脚本代码作为发送给服务器，服务器在未充分验证或转义的情况下，中。受害者需要被诱骗点击一个（包含攻击脚本）才能触发攻击。
在easyui中如何自定义表格里面的内容
qq_56826081的博客
07-22 545
这个里面，加上data-options，里面写上formatter，后面就是接的方法名称。这样就会显示我们的格式化过后的内容样式可以自己选择。
基于springboot的在线教育系统(源码+论文)
bronze_s的博客
07-21 2113
本文介绍了基于B/S架构的在线教育系统开发方案。系统采用Spring Boot框架和MySQL数据库，支持用户通过浏览器访问。文章详细阐述了系统结构设计，包括功能模块划分和数据库设计。数据库部分展示了地址、购物车、评论、讲师等核心表的字段结构，为系统实现提供了完整的数据模型基础。该系统设计实现了互联网环境下随时随地的教育服务访问需求。
Shopify 知识点
Xxxxxl17的博客
07-21 895
• 过滤器：{{ price | money }} 格式化价格，{{ content | truncatewords: 30 }} 截断文本。• 常用对象：product（商品）、collection（分类）、cart（购物车）、customer（用户）。• 避免XSS攻击：对用户输入内容转义（{{ user_input | escape }}）。• 动态生成 title 与 meta 描述（{{ page.title }}）。• 输出变量：{{ product.title }} 动态显示商品标题。
【第三节】Class与Style绑定
最新发布
qq_45142349的博客
07-22 1178
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式,因为它们都是属性，我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串。尽管可以用 Mustache 标签绑定 class,比如 class="{{className}}”，但是不推荐这种写法和 v-bind:class 混用。例如，如果isB 变为 true，class 列表将变为"static class-a class-b"我们可以传给 v-bind:class一个对象，以动态地切换 class。
实现动态交互的jQuery弹窗插件
jquery弹窗插件是基于jQuery开发的用于在网页中创建各种类型弹窗的工具。弹窗插件能够在不离开当前页面的情况下，显示额外的信息、通知或其他内容。此类插件广泛用于用户交互，如表单验证反馈、图片查看、信息提示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值