移动端-弹窗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 思路公众 ...

随机推荐

YUI的UA检测
YUI.UA是针对javascript的宿主环境检测的一个检测对象,返回的是一系统关于当前宿主的信息 1.对象相关信息列表及userAgent 检测对象o = { ie: 0, //ie Mozill ...
解决方案：elipse一直loading descriptor for...
1,问题描述: 打开eclipse,一直在loading descriptor for...,eclipse假死,什么操作都做不了 2,环境描述: Java Compiler:1.8 Jdk :1.8 ...
pymssql文档
原文地址 http://pymssql.org/en/latest/ref/_mssql.html _mssql module reference pymssql模块类,方法和属性的完整文档. Com ...
New Start!
博客连续搬了几个地方,从一开始的网易lofter,到点点,再到后来新浪sae自己搭建,折腾了很久,都因为各种原因没有坚持写博. 想了想,其实说到底还是因为懒,根本原因是自己没有毅力.什么不能贴代码,不 ...
class A<T>where T
where表明了对类型变量T的约束关系.where T: A表示类型变量是继承于A的,或者是A本身.where T:new()指明了创建T的实例时应该使用的构造函数.
从客户端(******)中检测到有潜在危险的 Request.Form 值。
在提交表单时候,asp.net 提示:"从客户端(......)中检测到有潜在危险的 Request.Form 值" .asp.net中的请求验证特性提供了某一等级的保护措施防止 ...
Bing必应(Yahoo雅虎)搜索引擎登录网站 - Blog透视镜
Bing必应是微软的搜索引擎,原本是置放在MSN网站上的,微软重新开发并改为新的名子,只要连到官网,登录网站后,过了不久,搜索引擎就会用爬虫,来检索你的网站,等过了一阵子之后,自然就可以找到你的文章. ...
在COM组件中调用JavaScript函数
转载自: http://blog.csdn.net/cheungmine/article/details/1451489 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS) ...
解决问题之，wp项目中使用MatchCollection正则表达式匹配出错
在最近,出现了这么一个问题本人使用正则表达式代码,解析响应output,意图获得周边的CMCC热点代码如下: //output="<?xml version=\"1.0\ ...
cf472D Design Tutorial: Inverse the Problem
D. Design Tutorial: Inverse the Problem time limit per test 2 seconds memory limit per test 256 mega ...

移动端-弹窗demo

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

随机推荐

热门专题