封装dialog弹框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .modal{

            position:fixed;

            left:0;

            right:0;

            top:0;

            bottom:0;

            background-color:rgba(0,0,0,0.5);

            display:none;

            z-index:1050;

            opacity:0;

            transition: all .5s ease-out 0s;

        }

        .dialog{

            width:500px;

            height:300px;

            position:relative;

            box-shadow:0 5px 15px rgba(0,0,0,.5);

            border-radius:10px;

            background-color:#fff;

            margin:30px auto;

            transform: translate(0,-40%);

            -webkit-transform: translate(0,-40%);

            transition: all .5s ease-out 0s;

        }

        .dialog-header{

            box-sizing:border-box;

            border-bottom:1px solid #ccc;

        }

        .dialog-header h3,.dialog-header span{

            display:inline-block;

        }

        .dialog-header span{

            float:right;

            margin-right:10px;

            overflow: hidden;

            line-height:58px;

            cursor:default;

            font-size:18px;

        }

        .in{

            opacity: 1;

        }

        .in .dialog{

            transform: translate(0,0);

            -webkit-transform: translate(0,0);

        }

    </style>

</head>

<body>

<input type="button" value="click" id="btn">

<div  style="height: 200px;width: 100%;"> dddddddd</div>

<div  style="height: 200px;width: 100%;"> dddddddd</div>

<div  style="height: 200px;width: 100%;"> dddddddd</div>

<div  style="height: 200px;width: 100%;"> dddddddd</div>

<div  style="height: 200px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div  style="height: 20px;width: 100%;"> dddddddd</div>

<div class="modal" id="modal">

    <div class="dialog" style="width: 300px;">

        <header class="dialog-header">

            <h3>this is dialog title</h3>

            <span id="close">&times;</span>

        </header>

        <div class="dialog-content">

            this is dialog content

        </div>

    </div>

</div>

<script>

    var oBtn = document.getElementById("btn");

    var oModal = document.getElementById("modal");

    var oClose = document.getElementById("close");

    var bodyEl = document.body

    oBtn.addEventListener("click", function(){

        // 方法1、点开时给body固定定位，关闭时相对定位

        // bodyEl.style.position = 'fixed';

        oModal.style.display = "block";

        // 方法2、给模态窗口添加touchmove事件进行阻止默认行为

        oModal.addEventListener('touchmove',function(e){

            e.stopPropagation();

            e.preventDefault();

        })

        var timer = setTimeout(function(){

            oModal.className = "modal in";

            clearTimeout(timer);

        },0);

    });

    oClose.addEventListener("click", function(){

        oModal.className = "modal";

        var timer = setTimeout(function(){

            oModal.style.display = "none";

            clearTimeout(timer);

        },200);

        // bodyEl.style.position = 'relative'

    });

    //封装=>说明一点，这里用了jquery选择器，也可以替换掉。

    /*

    * 封装之后可以创建Dialog对象，并且可以配置其位置和大小，在项目中可以在任何地方创建使用，不必每个弹窗都写一遍。

    * */

    //默认配置

    var defaultConfig = {

        width:600,

        height:300,

        top:30

    }

    function Dialog(config){

        this.config = {

            id:config.id || 'modal',

            width:config.width || 600,

            height:config.height || 400,

            top:config.top || 30

        };

        $($('#'+config.id).children()[0]).css({

            'width': config.width+"px",

            'height': config.height+"px",

            'margin-top': config.top+"px"

        });

    }

    Dialog.prototype = {

        show: function(){

            $('#'+this.config.id).show();

            var that = this;

            var timer = setTimeout(function(){

                $('#'+that.config.id).addClass("in");

                clearTimeout(timer);

            });

        },

        hide: function(){

            $('#'+this.config.id).removeClass('in');

            var that = this;

            var timer = setTimeout(function(){

                $('#'+that.config.id).hide();

                clearTimeout(timer);

            }, 200);

        }

    }

</script>

</body>

</html>

封装dialog弹框的更多相关文章

解决 jquery dialog 弹框destroy销毁方法不能把弹出元素设置成初始状态
在使用jquery ui中的dialog弹出窗口的时候遇到一个问题,就是页面弹出窗口关闭后希望表单元素能回到初始状态例如文本框输入内容后关闭dialog后里面的内容清除,使用了destroy方法也不 ...
jQuery-自己封装的弹框
(function () { CDK={ cfm:function(resFun,errFun){ var confirm=document.createElement('div'); confirm ...
jquery Dialog弹框插件
function Dialog(options) { var defaults = { // 默认值. title: '', // 标题文本,若不想显示title请通过CSS设置其display为no ...
easyUI创建dialog弹框
1.在当前页面必须有一个DIV  <div id="dialog-alarm-detail"></div&g ...
vue封装一个弹框组件
这是一个提示框和对话框,例: 这是一个组件 eject.vue <template> <div class='kz-cont' v-show='showstate'> &l ...
jquery Dialog弹框插件使用
var dialog = new Dialog({ title: '购物车', type: 'url', width: 520, content: "Uplolo.aspx", s ...
Android Dialog弹框提示
public void showUpdateDialog(String content) { //普通的AlertDialog对话框 AlertDialog.Builder builder = new ...
JQuery EasyUI dialog弹出框的 close 和 destroy
开发项目中(使用JQuery EasyUI),根据业务需要重叠弹出多个提示框的情况,会出现如下情况:页面出现两个div模块调用同一个弹出页面,页面的数据接受框元素不能实时存储数据解决方案: 使用$(t ...
vue封装公用弹出框方法，实现点击出现操作弹出框
vue封装公用弹出框方法,实现点击出现操作弹出框如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...

随机推荐

第一章Bootstrap简介
一.Bootstrap简介 Bootstrap是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jaco ...
HTML5之新增的元素和废除的元素（声明：内容节选自《HTML 5从入门到精通》）
新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. ...
微信小程序-scroll-view组件
<view class="section"> <view class="section__title">vertical scroll& ...
利用Metaweblog技术的API接口同步到多个博客网站（详细）
很早就有这个想法:自己有时候会用到多个博客,有些博客在一个网站上写完之后,要同步到其他博客网站,自己只能复制粘贴,感觉特别没意思,复制粘贴的麻木了.一直在想有哪些技术能实现一次写博,多站同步.最近网上 ...
【转载记录】Accessing Device Drivers from C#
来源:http://www.drdobbs.com/cpp/accessing-device-drivers-from-c/184416423/ Device Drivers are writte ...
VS2010项目转换成VS2008
声明:本篇文章不是本人原创,但是网站的地址没有记下来,所以不能贴出来.但此方法本人亲自验证有效. 一.将.sln文件中的 Microsoft Visual Studio Solution File, ...
Hive、Spark SQL、Impala比较
Hive.Spark SQL.Impala比较 Hive.Spark SQL和Impala三种分布式SQL查询引擎都是SQL-on-Hadoop解决方案,但又各有特点.前面已经讨论了Hi ...
zabbix共享内存报错cannot create semaphore set
zabbix共享内存报错 cannot open log: cannot create semaphore set: [28] No space left on device 报错原因: kernel ...
CPU纯软件全虚拟化技术
我们在前面的文章中提到了虚拟化技术的大致分类情况,即分为全虚拟化.半虚拟化和硬件辅助虚拟化3大类.而我们虚拟化技术最主要的虚拟主体就是我们的硬件CPU.内存和IO,那么我们的CPU在全虚拟化模式下如何 ...
Office 365实现单点登录系列(1)—域环境搭建
Hello 小伙伴们, 2018新年快乐,作为2018年首篇文章,怎么能不给大家带来点干货呢?这篇文章其实我9月底的时候已经在MSDN上发布过了,为表诚意,我更新了这篇文章,并把它组成了一个系列,2. ...

封装dialog弹框

封装dialog弹框的更多相关文章

随机推荐

热门专题