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

随机推荐

Java基础——面向对象
Hello 大家好,我又来啦,今天我们来说说Java的面向对象. 还记得之前去面试几家公司的实习生职位,大部分面试官都问过我有关面向对象的问题,不知道以后还会不会问,估计是不会了吧...(:3[▓▓ ...
Hibernate 注解（Annotations 四）多对多双向注解
注解(Annotation),也叫元数据.一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性,与类.接口.枚举是在同一个层次.它可以声明在包.类.字段.方法.局部变量.方法参数等的前面,用来 ...
MySQL与PHP的连接教程步骤（图文）
本篇文章我们介绍一下PHP与MySQL的整合,既然是与MySQL整合,那么我们首先肯定是要安装MySQL.下面我们就介绍下MySQL的安装方法. 第一步,下载MySQL.下载PHP可以去PHP中文网下 ...
mysql备份整个数据库的表结构和数据
Excel 2016 for Mac
1. Excel for Mac 的 Developer tab下没有XML组,因此无法从xml导入或者导出到xml: 2. Excel for Mac 中没有Mark as Finnal的功能: 3 ...
Windows server 2008 Tips
Tips for remote server in domain. Some Definition user [user] group workgroup domain Local account d ...
Android 解决NestedScrollView 嵌套 RecyclerView出现的卡顿，上拉刷新无效
解决卡顿的方法最简单的就是设置RecyclerView的android:nestedScrollingEnabled="false",放弃自己的滑动,交给外部的NestedScro ...
Eclipse调试不能进入断点
Eclipse下在给行设置断点或者在调试时弹出错误“Unable to install breakpoint due to missing line number attributes,Modify ...
file cycle
# Author:Alex# Date:2017.06.07# Version:3.6.0with open('james.txt') as jaf: data = jaf.readline() ja ...
让图片左右缓慢移动的MoveView
让图片左右缓慢移动的MoveView 效果: 源码: MoveView.h 与 MoveView.m // // MoveView.h // AnimationView // // Created b ...

封装dialog弹框

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

随机推荐

热门专题