移动端-弹窗demo

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

Netty4 学习笔记之一:客户端与服务端通信 demo
前言因为以前在项目中使用过Mina框架,感受到了该框架的强大之处.于是在业余时间也学习了一下Netty.因为Netty的主要版本是Netty3和Netty4(Netty5已经被取消了),所以我就直接 ...
vue3系列：vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件
基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0 ...
移动端弹窗滚动时window窗体也一起滚动的解决办法
在做移动端项目的时候发现,如果弹窗的内容很多很长,在滑动弹窗时,蒙层下面的window窗体也会跟着一起滚动,这样带来很差的视觉体验:当时也想了很多办法,比如判断滑动的元素,如果是弹窗里面的元素则禁止w ...
Android ListView分页载入（服务端+android端）Demo
Android ListView分页载入功能在实际开发中经经常使用到,是每一个开发人员必须掌握的内容,本Demo给出了服务端+Android端的两者的代码,并成功通过了測试. 服务端使用MyEcli ...
Netty4 学习笔记之二:客户端与服务端心跳 demo
前言在上一篇Netty demo 中,了解了Netty中的客户端和服务端之间的通信.这篇则介绍Netty中的心跳. 之前在Mina 中心跳的使用是通过继承 KeepAliveMessageFacto ...
移动端开发demo—移动端web相册（一）
本文主要是介绍开发移动端web相册这样一案例用到的前置知识. 一.移动端样式移动端更接近手机原生的方式. 如下是一个angular mobile的demo的例子: 移动端demo做成这样的好处: 在 ...
基于Delphi实现客户端服务端通信Demo
在开始之前我们需要了解下这个Demo功能是啥我们可以看到这是两个小project,左边的project有服务端和客户端1,右边的project只有一个客户端2 效果就是当两个客户端各自分别输入正确的 ...
实现ssr服务端渲染demo
最近在研究SSR服务器端渲染,自己写了的小demo. 项目布局 ├── build // 配置文件 │ │── webpack.base // 公共配置 │ │── webpack.clien ...
个人公众号服务端开发Demo
公众号出来很久了,也可以个人申请.知道公众号的服务端开发其实很简单,接口调用封装,数据存取,不外如是. 人一旦懒了,真的是 “无可救药” 了...现简单描述晚到的公众号HelloWorld 思路公众 ...

随机推荐

字符串在 UNICODE、MBCS编码下面的区别
1:SBCS (single byte character set)单字节字符集.在这种编码格式下,所有字符都用一个字节表示.ASCII码就是单字节字符.用“0”来表示一个字节的结束.2 :Unico ...
解决MySQL中文乱码的问题
遇到中文乱码问题,首先用status命令检查数据库的配置,如下: 上图会显示数据库配置的各项信息. 还可以用 show create database XXX,来显示创建数据库的时候的编码设置. 一般 ...
mysql 分组后取每个组内最新的一条数据
首先,将按条件查询并排序的结果查询出来. mysql order by accepttime desc; +---------------------+------+-----+ | acceptti ...
Oracle:ORA-01791: 不是 SELECTed 表达式
项目中写hql语句出现 ORA-01791: 不是 SELECTed 表达式问题. 语句如下: select distinct(name) where student order by numbe ...
CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
InetAddress类的使用
1.1. 简介 IP地址是IP使用的32位(IPv4)或者128位(IPv6)位无符号数字,它是传输层协议TCP,UDP的基础.InetAddress是Java对IP地址的封装,在java.net中有 ...
information_schema.events 学习
information_schema.events 表保存了整个mysql实例中的event 信息 1.常用列: 1.event_catalog :永远是def 2.event_schema :eve ...
mvn多模块开发消除重复依赖造成的打包失败
错误信息: [ERROR] Failed to execute goal on project xiaoyiweifu-core: Could not resolve dependencies for ...
怎样使用淘宝npm镜像
淘宝的 NPM 镜像是一个完整的npmjs.org镜像.你可以用此代替官方版本(只读),同步频率目前为 15分钟一次以保证尽量与官方服务同步. 当前 registry.npm.taobao.org ...
关于Keil C51中using关键字的使用心得
刚才看到一位很牛的师兄写的一篇日志中提到了Keil C51中using这个关键字的用法,粗心的我本来一直都没有留意它是用来干嘛的(因为我一般看见它都是在中断服务函数的定义开头处,好像没有了它也可以中断 ...

移动端-弹窗demo

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

随机推荐

热门专题