移动端-弹窗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 思路 公众 ...
随机推荐
- Js之Navigator对象
Window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象.Navigator对象的命名是为了纪念Netscape之后NavigatorBU览器译注2,不过所有其 ...
- hibernate操作数据库总结（转）
一.query方式 1.hibernate使用原生态的sql语句执行数据库查询 有些时候有些开发人员总觉得用hql语句不踏实,程序出现了错误,就猜测因为不是原生态的sql语句,数据库不支持,因此情愿选 ...
- ExtJs 学习笔记
1.显示中文 <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"&g ...
- jquery append 动态添加的元素事件on 不起作用问题的解决
on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 不多说看成功代码(注意加粗加色): <!DOCTYPE html PUBLIC "-//W ...
- web.xml中配置Spring中applicationContext.xml的方式
2011-11-08 16:29 web.xml中配置Spring中applicationContext.xml的方式 使用web.xml方式加载Spring时,获取Spring applicatio ...
- dede调用时间大全标签，不同格式！
[field:pubdate function="MyDate('Y-m-d',@me)"/]2013-12-17[field:pubdate function=MyDate('m ...
- tuple只有一个元素的时候，必须要加逗号
In [1]: a = (1) In [2]: a Out[2]: 1 In [3]: a = (1,) In [4]: a Out[4]: (1,) 这是因为括号()既可以表示tuple,又可以表示 ...
- html 知识
<pre name="code" class="python"><pre name="code" class=" ...
- easyui 表单验证validatetype——支持自定义验证
easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下: 代码 Code highlighting produced by Actipro C ...
- Dynamic Flash Messages
Dynamic Flash Messages的类似软件 - 其他jQuery插件 - 开源中国社区 Dynamic Flash Messages