<!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>