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

随机推荐

golang 编码转化
在网上搜索golang编码转化时,我们经常看到的文章是使用下面一些第三方库: https://github.com/djimenez/iconv-go https://github.com/qiniu ...
HDU 2199 (二分法)
主要思想就是两端逼近,最后得到结果,0MS #include <iostream> #include <cstdlib> #include <cstdio> #in ...
MVC 中使用kindEditor 图片上传在IE 上进行上传出现的问题
在IE 上使用KindEditor 进行单张图片上传的时候会出现一个下载安全警告,这样将会造成图片上传失败,出现的错误页面:
lambda 表达式学习笔记
在Java中传递一个代码段并不容易,不能直接传递代码段.Java是一个面向对象语言,所以必须构造一个对象,这个对象的类需要一个方法能包含所需的代码.lambda的出现有效的解决这个问题,让代码变得更加 ...
jQuery bind()与delegate()的区别
笔试题: bind()与delegate()的区别主要有三点: 1 绑定目标 .bind直接绑在目标元素上 .delegate绑在父元素上 2 监听个数 .bind监听个数多——每个目标元素都需要添 ...
JS获取第二个横杠后面的内容
假设数据为: let str = "zheng-shize-zsz"; 获取第一个横杠的位置: str.indexOf("-") 1. 那获取第二个横杠怎么写呢 ...
为什么排版引擎解析 CSS 选择器时一定要从右往左解析？
首先我们要看一下选择器的「解析」是在何时进行的. 主要参考这篇「 How browsers work」(http://taligarsiel.com/Projects/howbrowserswork1 ...
template 的使用
插件介绍:template 是一个高性能的JavaScript模板引擎. 插件特性: 1.性能卓越,执行速度快(mustache 与 tmpl 的20多倍): 2.支持运行时调试,可精准定位异常模板所 ...
获取JPEGImageEncoder和JPEGCode这两个类
最近要对PDF做一些操作,在查看别人代码,拿过来借用的时候,由于代码不完整,引用的类也不全,导致JPEGImageEncoder和JPEGCode这两个类找不到,后来网上搜索了下,发现这两个类来自于J ...
利用Ogr将Kml转为Shape【1】
最近在研究Kml怎么转化为Shape文件,因为客户中很多在原来采集了一部分数据都是在google Earth中,而我们的应用中特别需要这份数据,所以打算先在GE中把这份数据导出为Kml或Kmz文件,然 ...

封装dialog弹框

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

随机推荐

热门专题