<!doctype html>

<html>

<head>

  <meta charset="UTF-8">

<meta name="robots" content="noindex">

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

  <meta content="yes"name="apple-mobile-web-app-capable"/>

  <meta content="black"name="apple-mobile-web-app-status-bar-style"/>

  <meta name="format-detection"content="telphone=no"/>

  <title>modal测试</title>

  <link rel="stylesheet" href="http://www.w3cplus.com/mcommon/reset.css" media="all">

  <script src="http://www.w3cplus.com/mcommon/zepto.1.1.3.js"></script>

<style id="jsbin-css">

.header,.footer,.wrap-page{

  position:absolute;

  left:0;

  right:0;

  background-color: #fff;

}

.header,.footer{

  height:44px;

  background-color: #fff;

  text-align: center;

  z-index:900;

  line-height:44px;

}

.header{

  top: 0;

  border-bottom: 1px solid #f00;

}

.footer{

  bottom: 0;

  border-top: 1px solid #f00;

}

.page-title{

  line-height:44px;

}

.fl{

  float:left;

}

.fr{

  float: right;

}

.wrap-page{

  top: 44px;

  bottom: 0;

  overflow-y:auto;

  -webkit-overflow-scrolling: touch;

}

.page{

    position: relative;

    padding: 10px;

}

.page p{

    margin-bottom: 10px;

}

.modal-link{

  background-color: #f00;

  color:#fff;

  padding: 10px;

  border-radius:3px;

  display: inline-block;

  cursor: pointer;

}

/* overlay */

.overlay,

.modal .modal-ft {

  display: -webkit-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

}

.overlay {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: -1;

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

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  -webkit-justify-content: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-align-items: center;

  align-items: center;

}

.overlay.active {

  z-index: 980;

}

.modal {

  -webkit-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

.modal {

  background-color: #fff;

  border-radius: 5px;

  margin: 0 10px;

  overflow: hidden;

  opacity: 0;

  -webkit-transform: translate3d(0, 0, 0) scale(0.815);

  transform: translate3d(0, 0, 0) scale(0.815);

  -webkit-transition-property: -webkit-transform, opacity;

  transition-property: transform, opacity;

}

.modal.modal-in {

  opacity: 1;

  -webkit-transform: translate3d(0, 0, 0) scale(1);

  transform: translate3d(0, 0, 0) scale(1);

}

.modal .modal-hd {

  text-align: center;

  line-height: 40px;

  background-color: #0078e7;

  color: #fff;

}

.modal .modal-bd {

  padding: 15px;

}

.modal .modal-ft {

  border-top: 1px solid #cccccc;

}

.modal .modal-ft .btn-modal {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  -webkit-flex: 1;

  flex: 1;

  background-color: #fefefe;

  text-align: center;

  line-height: 40px;

  color: #0078e7;

}

.modal .modal-ft .btn-modal:first-child {

  border-right: 1px solid #cccccc;

}

.modal .modal-ft .btn-modal:last-child {

  border-right: none;

}

.modal .modal-ft .btn-modal:hover, .modal .modal-ft .btn-modal:active {

  background-color: #d9d9d9;

}

</style>

</head>

<body>

    <header id="header" class="header">

        <h1 class="page-title">modal 测试</h1>

    </header>

    <div id="main" class="wrap-page">

        <section class="page">

          <p><span class="modal-link" data-modal="modal-test">点击测试 modal</span></p>

          <p>君子曰：学不可以已。</p>

            <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>

            <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p>

            <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p>

            <p>君子曰：学不可以已。</p>

            <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>

            <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p>

            <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p>

            <p>君子曰：学不可以已。</p>

            <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>

            <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p>

            <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p>

        </section>

    </div>

  <div class="overlay" id="overlay">

    <section class="modal modal-test" style="display:none;">

      <div class="modal-hd">标题</div>

      <div class="modal-bd">

        <p>1青，取之于蓝，而青于蓝；冰，水为之，而寒于水。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>

        <p>2青，取之于蓝，而青于蓝；冰，水为之，而寒于水。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>

        <p>3青，取之于蓝，而青于蓝；冰，水为之，而寒于水。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>

      </div>

      <div class="modal-ft">

        <span class="btn-modal">确认</span><span class="btn-modal">取消</span>

      </div>

    </section>

  </div>

<script>

$(function(){

  var $overlay = $('#overlay');

  function modalHidden($ele) {

    $ele.removeClass('modal-in');

    $ele.one('transitionend',function(){

      $ele.css({"display": "none"});

      $overlay.removeClass('active');

    });

  }

  $('.modal-link').tap(function(){

    var $that = $(this);

    $overlay.addClass('active');

    var $whichModal = $('.'+$(this).data('modal'));

    $whichModal.animate({"display":"block"},100,function(){

      $(this).addClass('modal-in');

    });

    $('.btn-modal').tap(function(e){

      modalHidden($whichModal);

      e.stopPropagation();

    });

    $overlay.tap(function(e){

     if(e.target.classList.contains('overlay')){

        modalHidden($whichModal);

      }

    });

  });

});

</script>

</body>

</html>

移动端-弹窗demo的更多相关文章

  1. Netty4 学习笔记之一:客户端与服务端通信 demo

    前言 因为以前在项目中使用过Mina框架,感受到了该框架的强大之处.于是在业余时间也学习了一下Netty.因为Netty的主要版本是Netty3和Netty4(Netty5已经被取消了),所以我就直接 ...

  2. vue3系列：vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件

    基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0 ...

  3. 移动端弹窗滚动时window窗体也一起滚动的解决办法

    在做移动端项目的时候发现,如果弹窗的内容很多很长,在滑动弹窗时,蒙层下面的window窗体也会跟着一起滚动,这样带来很差的视觉体验:当时也想了很多办法,比如判断滑动的元素,如果是弹窗里面的元素则禁止w ...

  4. Android ListView分页载入（服务端+android端）Demo

    Android ListView分页载入功能 在实际开发中经经常使用到,是每一个开发人员必须掌握的内容,本Demo给出了服务端+Android端的两者的代码,并成功通过了測试. 服务端使用MyEcli ...

  5. Netty4 学习笔记之二:客户端与服务端心跳 demo

    前言 在上一篇Netty demo 中,了解了Netty中的客户端和服务端之间的通信.这篇则介绍Netty中的心跳. 之前在Mina 中心跳的使用是通过继承 KeepAliveMessageFacto ...

  6. 移动端开发demo—移动端web相册（一）

    本文主要是介绍开发移动端web相册这样一案例用到的前置知识. 一.移动端样式 移动端更接近手机原生的方式. 如下是一个angular mobile的demo的例子: 移动端demo做成这样的好处: 在 ...

  7. 基于Delphi实现客户端服务端通信Demo

    在开始之前我们需要了解下这个Demo功能是啥 我们可以看到这是两个小project,左边的project有服务端和客户端1,右边的project只有一个客户端2 效果就是当两个客户端各自分别输入正确的 ...

  8. 实现ssr服务端渲染demo

    最近在研究SSR服务器端渲染,自己写了的小demo. 项目布局 ├── build // 配置文件 │   │── webpack.base // 公共配置 │   │── webpack.clien ...

  9. 个人公众号服务端开发Demo

    公众号出来很久了,也可以个人申请.知道公众号的服务端开发其实很简单,接口调用封装,数据存取,不外如是. 人一旦懒了,真的是 “无可救药” 了...现简单描述晚到的公众号HelloWorld 思路 公众 ...

随机推荐

  1. PHP--变量部分知识点

    PHP全局变量 PHP全局变量作用域不同与C,在函数内部不可以使用全局变量,要在函数内部使用全局变量需要,global $var或者使用超全局变量数组$GLOBALS['var']. 静态变量 PHP ...

  2. SqlServer排序(null值，和非空值排列顺序)

    项目中遇到一个问题,需要设置序号排序,而该字段中的默认值为空,使用普通排序,空值就会在最前边.可以使用如下语句:   其中 col 为 排序的字段名称. then 0 else 1 代表先空值,后数字 ...

  3. IE6 双倍距BUG

    IE6双倍距BUG的形成: 1.快元素 2.元素浮动 3.margin左右 解决方案:_display:inline;

  4. [C++程序设计]内置函数

    注意: 可以在声明函数和定义函数时同时写 inline,也可以只在其中一处声明inline,效果相同,都能按内置函数处理. 使用内置函数可以节省运行时间,但却增加了目标 程序的长度.因此一般只将规模很 ...

  5. Bootstrap的响应式,当文字超过div长度,换行问题的处理!

    (1)overflow: hiddenoverflow 属性规定当内容溢出元素框时发生的事情.这个属性定义溢出元素内容区的内容会如何处理.hidden 表示内容会被修剪,并且剪掉的内容是不可见的. ( ...

  6. Fatal error: Undefined class constant 'MYSQL_ATTR_USE_BUFFERED_QUERY' in D:\inetpub\vhosts\zenpty.com\httpdocs\includes\database

    打开php.ini配置文件,找到php_pdo_mysql.dll,如果前面有分号";"则表示该行被注释掉了,将分号去掉,保存,然后重启apache服务,重新访问页面,问题解决了.

  7. WPF笔记(2.7 文字布局)——Layout

    原文:WPF笔记(2.7 文字布局)--Layout 这一节介绍的是文字布局的几个控件:1.TextBlock      最基本的文字控件可以配置5个Font属性.TextWraping属性,&quo ...

  8. centos单用户模式：修改ROOT密码和grub加密

    centos单用户模式:修改ROOT密码和grub加密 CentOSLinux网络应用配置管理应用服务器  Linux 系统处于正常状态时,服务器主机开机(或重新启动)后,能够由系统引导器程序自动引导 ...

  9. CentOS 6.5 CodeBlocks::wxWidgets安装与配置

    第一步, #yum install  codeblocks codeblocks-contrib codeblocks-devel 第二步,到官方下载源码包,我下的是wxX11的3.0版的. #tar ...

  10. uva 101 by sixleaves

    这是一道很好的模拟题,用vector<int> p[maxn],建立模型,映射为maxn个堆.主要要掌握vector模拟堆操作的简单方法.接下来得思路是自顶向下的方式,逐步完善程序.首先根 ...