<!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. 第一个Windows窗口应用程序

    学习目的 熟悉开发工具Visual C++ 6.0和MSDN 2001的使用. 应用Windows API函数, 手工编写具有最基本构成的Windows窗口应用程序(包含WinMain入口函数, 消息 ...

  2. CF961F k-substrings

    题意 给定一个字符串 \(S\) 求所有的 \(S[i,n-i+1]\) 的 \(border\) 长度(最长的前缀等于后缀),要求长度是奇数 \(n\le 10^6\) Sol 首先发现每次求的串都 ...

  3. bootstrap学习笔记(菜单.按钮)

    下拉菜单 <div class="dropdown"> <button class="btn btn-default dropdown-toggle&q ...

  4. Nodejs + express post get 参数获取小结

    req.params.xxxxx 从path中的变量 req.query.xxxxx 从get中的?xxxx=中 req.body.xxxxx 从post中的变量 Post下别忘了: app.use( ...

  5. C++ 线程学习

    原文:http://blog.csdn.net/wzy_1988/article/details/46562921 线程的概念 C++中的线程的Text Segment和Data Segment都是共 ...

  6. LoadRunner简单培训相关笔记

    学校花了20万买了LoadRunner,因此作为幸运的一届,赶上了这场培训.以下为笔记以及培训后制作的简易思维导图. Loadrunner思维导图源码(Xmind): http://pan.baidu ...

  7. leetcode Ch7-Graph Search

    1. Clone Graph BFS: class Solution { public: typedef UndirectedGraphNode UGNode; UndirectedGraphNode ...

  8. Oracle案例08——xx.xx.xx.xx,表空间 SYSAUX 使用率>95%%

    本实例主要针对Oracle表空间饱满问题处理方法做个步骤分享.  一.告警信息 收到zabbix告警信息,表空间 SYSAUX 使用率>95%%,系统表空间sysaux使用率超过了95%. 二. ...

  9. Excel录入中实现单元格多选项自动下拉

    当我们在Excel表格中需要输入大量的重复数据时,往往利用数据的有效性来制作一个下拉菜单以提高重复数据的输入速度.但在实际的操作过程中,必须选中需要输入重复数据的单元格并单击该单元格右边的下拉箭头,才 ...

  10. JavaScript学习---JavaScript深入学习

    对象的概念 对象分类[3种]:     ECMScript(JS自己的对象), BOM(浏览器对象)    DOM(文档对象,操作HTML的) 11种内置对象:       Array ,String ...