zoukankan      html  css  js  c++  java
  • 移动端-弹窗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>
  • 相关阅读:
    VS2008 环境中完美搭建 Qt 4.7.4 静态编译的调试与发布 Inchroy's Blog 博客频道 CSDN.NET
    编写可丢弃的代码
    c++ using namespace std; 海明威 博客园
    解决MySQL server has gone away
    nginx upstream 调度策略
    (2006, 'MySQL server has gone away') 错误解决 dba007的空间 51CTO技术博客
    Linux IO模型漫谈(2) 轩脉刃 博客园
    redis源码笔记 initServer 刘浩de技术博客 博客园
    MySQLdb批量插入数据
    词库的扩充百度百科的抓取你知道这些热词吗? rabbit9898 ITeye技术网站
  • 原文地址:https://www.cnblogs.com/webfby/p/4460557.html
Copyright © 2011-2022 走看看