<!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弹框的更多相关文章

  1. 解决 jquery dialog 弹框destroy销毁方法不能把弹出元素设置成初始状态

    在使用jquery ui中的dialog弹出窗口的时候遇到一个问题,就是页面弹出窗口关闭后希望表单元素能回到初始状态 例如文本框输入内容后关闭dialog后里面的内容清除,使用了destroy方法也不 ...

  2. jQuery-自己封装的弹框

    (function () { CDK={ cfm:function(resFun,errFun){ var confirm=document.createElement('div'); confirm ...

  3. jquery Dialog弹框插件

    function Dialog(options) { var defaults = { // 默认值. title: '', // 标题文本,若不想显示title请通过CSS设置其display为no ...

  4. easyUI创建dialog弹框

    1.在当前页面必须有一个DIV <!-- 保证金明细的详情列表显示 --> <div id="dialog-alarm-detail"></div&g ...

  5. vue封装一个弹框组件

    这是一个提示框和对话框,例:   这是一个组件 eject.vue <template> <div class='kz-cont' v-show='showstate'> &l ...

  6. jquery Dialog弹框插件使用

    var dialog = new Dialog({ title: '购物车', type: 'url', width: 520, content: "Uplolo.aspx", s ...

  7. Android Dialog弹框提示

    public void showUpdateDialog(String content) { //普通的AlertDialog对话框 AlertDialog.Builder builder = new ...

  8. JQuery EasyUI dialog弹出框的 close 和 destroy

    开发项目中(使用JQuery EasyUI),根据业务需要重叠弹出多个提示框的情况,会出现如下情况:页面出现两个div模块调用同一个弹出页面,页面的数据接受框元素不能实时存储数据解决方案: 使用$(t ...

  9. vue封装公用弹出框方法，实现点击出现操作弹出框

    vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...

随机推荐

  1. 思维导图_Python_内置函数

  2. 由上一个血案引发的关于property和attribute关系的思考

    boss说,学习要刨根问底. 好的,开刨. 一.property和attribute在英语里有什么区别 看似没有区别.但其实大神说: property是 物体本身自带属性,不能改变的(一旦改了就是另外 ...

  3. ES6学习笔记（六）-数组扩展

  4. JavaScript 工具库：Cloudgamer JavaScript Library v0.1 发布

    JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布   研究了一年多的js,也差不多写一个自己的js库了.我写这个不算框架,只是一个小型的js工具 ...

  5. 浏览器根对象window之Location

    1. Location Location 对象包含有关当前 URL 的信息.Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问. 1.1 Loc ...

  6. slice()方法 和splice 方法的区别

    定义 splice() 方法 用于插入.删除或替换数组的元素. slice() 方法 可提取字符串的某个部分,并以新的字符串返回被提取的部分. 更多的可查看: http://www.cnblogs.c ...

  7. AutoMapper6扩展

    简介 很多时候我们使用AutoMapper的时候,都需要进行一个配置才可以使用Mapper.Map<Source,Target>(entity);.如果不进行配置则会报错. 如果实体过多, ...

  8. google学习

    https://developers.google.com/machine-learning/crash-course/ https://developers.google.com/machine-l ...

  9. C#字节流通信格式

    类似通信格式的实现关键点: byte数组转float的实现,BitConvetor.toSingle() float类型转by,BitConverter.GetBytes #客户端发送public b ...

  10. Linux系统环境下安装dedecms(织梦)提示http500错误的解决办法

    碰到一客户安装DEDE提示http500错误,问题已得到完美解决,下面我分享下 这个解决办法,希望有帮助. 故障状态:正常安装dedecms v5.7 gbk提示http500错误Dede安装环境:一 ...