search

twbs / ratchet

Build mobile apps with simple HTML, CSS, and JavaScript components.
http://goratchet.com
MIT License
14.62k stars 1.44k forks source link

Cannot scroll content when modal has a scroll (modal's height > body's height) #674

Open tinymins opened 10 years ago

tinymins commented 10 years ago

When a modal's height is larger than screen height, and I want to scroll the main content on my mobile, I find that I cannot scroll the main content. Instead, I got the modal div scrolled but actually I'm touching the area of the main content and that modal div wasn't shown on my mobile when I touch.

It's OK when browsed in chrome on my computer. It only appeared on my android smart phone. My android phone is MI-ONE Plus and runs Android 4.1.2 OS.

Here is my code:

<html><head>
    <meta charset="utf-8">
    <title>2014年度柜员“三基本”培训验证考试题库搜索 - 翟一鸣</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Include the compiled Ratchet CSS -->
    <link href="css/ratchet.css" rel="stylesheet">
    <!-- <link href="css/ratchet-theme-ios.min.css" rel="stylesheet"> -->

    <!-- Include the compiled Ratchet JS -->
    <script src="js/ratchet.js"></script>

    <script src="phonegap.js"></script>
    <script type="text/javascript" src="js/jquery.1.8.2.min.js"></script>
    <link href="css/index.css" rel="stylesheet">
  </head>
  <body>

    <!-- Make sure all your bars are the first things in your <body> -->
    <header class="bar bar-nav">
      <a class="icon icon-gear pull-left" href="#settingsModal"></a>
      <h1 class="title">题库搜索大师</h1>
    </header>

    <div class="bar bar-standard bar-header-secondary">
      <input type="search" id="input_search" placeholder="搜索">
    </div>

    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
    <div class="content">
      <ul class="table-view topic-list"><li class="table-view-cell">营业终了，柜员需核对未发行有价单证实物与（ ）以及相关登记簿余额<span class="high-lighted">是</span>否相符。</li><li class="table-view-divider">&gt; 表外分户明细余额</li><li class="table-view-cell">营业终了，柜员用（ ）交易，核对凭证实物与系统中对应的凭证种类余额<span class="high-lighted">是</span>否相符。</li><li class="table-view-divider">&gt; 5642</li><li class="table-view-cell">日终柜员应选择（ ）交易检查91平账器<span class="high-lighted">是</span>否平账。</li><li class="table-view-divider">&gt; 0317</li><li class="table-view-cell">日终柜员应检查91、92平账器<span class="high-lighted">是</span>否平账，若92平账器未全部核销，应打印（ ），提示接收柜员及时处理未核销账项。</li><li class="table-view-divider">&gt; 未核销账项明细表</li><li class="table-view-cell">开立注册验资户需要提供的证明文件<span class="high-lighted">是</span>（ ）。</li><li class="table-view-divider">&gt; 工商行政管理部门核发的企业名称预先核准通知书或有关部门的批文</li><li class="table-view-cell">下面关于一般存款账户说法错误的<span class="high-lighted">是</span>（ ）。</li><li class="table-view-divider">&gt; 存款人开立一般存款账户需人民银行核准</li><li class="table-view-cell">因注册验资开立的临时存款账户，其预留银行印鉴应<span class="high-lighted">是</span>存款人与银行在银行结算账户管理协议中约定的（ ）名称。</li><li class="table-view-divider">&gt; 出资人</li><li class="table-view-cell">电子银行在柜台办理的关键环节<span class="high-lighted">是</span>（ ）。</li><li class="table-view-divider">&gt; 注册签约</li><li class="table-view-cell">网上银行业务<span class="high-lighted">是</span>指我行利用（ ）向客户提供的账户管理、信息查询、转账结算、缴费支付、投资理财、融资贷款等金融服务。</li><li class="table-view-divider">&gt; 互联网</li><li class="table-view-cell">电子银行缴费账户<span class="high-lighted">是</span>向客户收取相关电子银行服务费用的专用账户，客户可以指定（ ）任意一张借记卡或信用卡作为电子银行缴费账户。</li><li class="table-view-divider">&gt; 本人</li><li class="table-view-cell">电话银行的联动交易中，柜员可以通过查询出客户的（ ），判断客户<span class="high-lighted">是</span>否开通电话银行。</li><li class="table-view-divider">&gt; 以上都可以</li><li class="table-view-cell">个人网上银行注册客户注册登记的账户可以<span class="high-lighted">是</span>（ ）。</li><li class="table-view-divider">&gt; 本人农行个人结算账户</li><li class="table-view-cell">网上特约商户注销业务的受理行必须<span class="high-lighted">是</span>办理商户注册的（ ）。</li><li class="table-view-divider">&gt; 受理行</li><li class="table-view-cell">（ ）作为银行最主要的服务窗口、产品实现和社会形象展示渠道，<span class="high-lighted">是</span>风险防控的重点领域。</li><li class="table-view-divider">&gt; 柜台</li><li class="table-view-cell">对于法定代表人或单位负责人授权他人办理单位银行结算账户开立业务的，被授权人应<span class="high-lighted">是</span>（ ）。</li><li class="table-view-divider">&gt; 授权单位工作人员</li><button class="btn btn-block btn-outlined" onclick="javascript:$(this).remove();LoadMore('是',15);">加载更多…</button></ul>
    </div>

    <!-- Settings modal -->
    <div id="settingsModal" class="modal">
      <header class="bar bar-nav">
        <a class="icon icon-close pull-right" href="#settingsModal"></a>
        <h1 class="title">设置</h1>
      </header>

      <div class="content">
        <!-- 选择题库 -->
        <h5 class="content-padded">题库选择</h5>
        <ul class="table-view">
          <li class="table-view-cell">
            测试题库 1
            <div class="toggle">
              <div class="toggle-handle"></div>
            </div>
          </li>
          <li class="table-view-cell">
            测试题库 2
            <div class="toggle active">
              <div class="toggle-handle"></div>
            </div>
          </li>
          <li class="table-view-cell">
            测试题库 3
            <div class="toggle">
              <div class="toggle-handle"></div>
            </div>
          </li>
        </ul>
        <!-- 题库管理 -->
        <h5 class="content-padded">在线题库</h5>
        <div class="content-padded">
          <button class="btn btn-positive btn-block" onclick="javascript:$('#settingsModal').removeClass('active');">返回</button>
          <button class="btn btn-negative btn-block" onclick="javascript:navigator.app.exitApp();">退出</button>
        </div>
      </div>
    </div><!-- /.modal -->

</body></html>

Is this a bug or just something wrong with my code?

tinymins commented 10 years ago 
.modal { display: none; }
.modal.active { display: block; }

This way can solve the problem but I believe this isn't a good way.