weui/src/example/form/form_bottom_fixed.html

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

<div class="page">
  <div class="weui-form weui-bottom-fixed-opr-page">
    <div class="weui-form__bd weui-bottom-fixed-opr-page__content">
      <div class="weui-form__text-area">
        <h2 class="weui-form__title">底部悬浮表单</h2>
        <div class="weui-form__desc">底部悬浮表单样式</div>
      </div>
      <div class="weui-form__control-area">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells">
              <div class="weui-cell weui-cell_active">
                  <div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
                  <div class="weui-cell__bd">
                      <input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907"/>
                  </div>
                  <div class="weui-cell__ft">
                    <button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon">
                      <i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
                    </button>
                  </div>
              </div>
              <div class="weui-cell weui-cell_active">
                  <div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
                  <div class="weui-cell__bd">
                      <input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907"/>
                  </div>
                  <div class="weui-cell__ft">
                    <button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon">
                      <i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
                    </button>
                  </div>
              </div>
              <div class="weui-cell weui-cell_active">
                  <div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
                  <div class="weui-cell__bd">
                      <input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907"/>
                  </div>
                  <div class="weui-cell__ft">
                    <button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon">
                      <i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
                    </button>
                  </div>
              </div>
              <div class="weui-cell weui-cell_active">
                  <div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
                  <div class="weui-cell__bd">
                      <input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907"/>
                  </div>
                  <div class="weui-cell__ft">
                    <button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon">
                      <i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
                    </button>
                  </div>
              </div>
              <div class="weui-cell weui-cell_active">
                  <div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
                  <div class="weui-cell__bd">
                      <input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907"/>
                  </div>
                  <div class="weui-cell__ft">
                    <button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon">
                      <i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
                    </button>
                  </div>
              </div>
              <div class="weui-cell weui-cell_active">
                  <div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
                  <div class="weui-cell__bd">
                      <input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907"/>
                  </div>
                  <div class="weui-cell__ft">
                    <button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon">
                      <i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
                    </button>
                  </div>
              </div>
          </div>
          <div class="weui-cells__tips"><a class="weui-link weui-wa-hotarea" href="javascript:">收不到验证码</a></div>
        </div>
      </div>
    </div>
    <div class="weui-form__ft weui-bottom-fixed-opr-page__tool">
      <div class="weui-form__tips-area">
        <label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree weui-wa-hotarea">
          <input id="weuiAgreeCheckbox" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a>
          </span>
        </label>
      </div>
      <div class="weui-form__opr-area weui-bottom-fixed-opr">
        <button class="weui-btn weui-btn_primary" type="button" id="showTooltips">确定</button>
      </div>
    </div>
  </div>
  <div role="alert" id="js_toast" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
          <i class="weui-icon-success-no-circle weui-icon_toast"></i>
          <p class="weui-toast__content">已完成</p>
      </div>
  </div>
  <div role="alert" id="js_agree_msg" class="weui-hidden_abs" style="display: none;">未同意《相关条款》</div>
  <div id="dialogs">
      <!--BEGIN dialog1-->
      <div role="dialog" aria-modal="true" class="js_dialog" id="iosDialog1" style="display: none;">
          <div class="weui-mask"></div>
          <div id="js_half_screen_dialog" class="weui-half-screen-dialog">
              <div class="weui-half-screen-dialog__hd">
                <div class="weui-half-screen-dialog__hd__side">
                    <button id="dialogClose" class="weui-icon-btn">关闭<i class="weui-icon-close-thin"></i></button>
                </div>
                <div class="weui-half-screen-dialog__hd__main">
                  <strong class="weui-half-screen-dialog__title">标题</strong>
                </div>
              </div>
              <div class="weui-half-screen-dialog__bd">
                <br>
                <br>
                可放自定义内容
                <br>
                <br>
                <br>
                <br>
              </div>
          </div>
      </div>
      <!--END dialog1-->
  </div>
</div>

<script type="text/javascript">
    $(function(){
      var $tooltips = $('.js_tooltips');
      var $toast = $('#js_toast');
      var $input = $('#js_input1');
      var $inputClear = $('#js_input_clear');
      var $agree= $('#weuiAgree');
      var $agreeMsg= $('#js_agree_msg');
      var $agreeCheckbox = $('#weuiAgreeCheckbox');
      var $iosDialog1 = $('#iosDialog1');
      var $halfScreenDialog = $('#js_half_screen_dialog');

      $input.on('input', function(){
        var $value = $input.val();
        if ($value){
          $('#showTooltips').removeAttr('disabled');
          $('#showTooltips').attr('aria-disabled','false');
        }else{
          $('#showTooltips').addAttr('disabled');
          $('#showTooltips').attr('aria-disabled','true');
        }
      });

      //$agreeCheckbox.on('change', function(){
      //});

      $('#showTooltips').on('click', function(){
        if ($tooltips.css('display') != 'none') return;
        // toptips的fixed, 如果有`animation`, `position: fixed`不生效
        $('.page.cell').removeClass('slideIn');

        if($agreeCheckbox.prop("checked")){
          $toast.fadeIn(100);
          $toast.attr('aria-live','assertive');
          setTimeout(function () {
            $toast.fadeOut(100);
            $toast.attr('aria-live','off');
          }, 2000);
        }else{
          $agree.addClass('weui-agree_animate');
          $agreeMsg.show();
          setTimeout(function () {
            $agree.removeClass('weui-agree_animate');
            $agreeMsg.hide();
          }, 200);
        }
      });


      $('#dialogs').on('click', '.weui-mask', function(){
        $halfScreenDialog.removeClass('weui-half-screen-dialog_show');
        $(this).parents('.js_dialog').fadeOut(200);
        $iosDialog1.attr('aria-modal','false');
          $('#showIOSDialog1').attr('tabindex','-1').trigger('focus');
      });
      $('#dialogClose').on('click', function(){
        $halfScreenDialog.removeClass('weui-half-screen-dialog_show');
        $(this).parents('.js_dialog').fadeOut(200);
        $iosDialog1.attr('aria-modal','false');
          $('#showIOSDialog1').attr('tabindex','-1').trigger('focus');
      });

      $('#showIOSDialog1').on('click', function(){
        $iosDialog1.fadeIn(200);
        $halfScreenDialog.addClass('weui-half-screen-dialog_show');
        $iosDialog1.attr('aria-modal','true');
        setTimeout(function () {
          $('#dialogClose').trigger('focus');
        }, 500);
      });

      $('.weui-cell').on('click', function(e){
        if(e.target.classList.contains('js_target')){
          return;
        }
        $(this).find('input').trigger('focus');
      });
      $inputClear.on('click', function(){
        $input.val('');
      });

    });
</script>