weui-wxss/dist-rpx-mode/example/half-screen-dialog/half-screen-dialog.js.html

weui-wxss

<div class="page">
    <div class="page__hd">
        <h1 class="page__title">Half-screen Dialog</h1>
        <p class="page__desc">半屏组件</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="btn1">样式一</a>
        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="btn2">样式二</a>
    </div>

    <div id="dialogs">
        <!--BEGIN dialog1-->
        <div role="dialog" aria-modal="false" aria-labelledby="title1" tabindex="0" class="js_dialog" id="dialog1" style="display: none;">
            <div id="close1" role="option" class="weui-mask"></div>
            <div id="dialog_1" class="weui-half-screen-dialog">
                <div class="weui-half-screen-dialog__hd">
                  <div class="weui-half-screen-dialog__hd__side">
                    <button class="js_close weui-icon-btn">关闭<i class="weui-icon-close-thin"></i></button>
                  </div>
                  <div class="weui-half-screen-dialog__hd__main">
                    <strong id="title1" 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-->
        <!--BEGIN dialog2-->
        <div role="dialog" aria-modal="false" aria-labelledby="title2" tabindex="0" class="js_dialog" id="dialog2" style="display: none;">
            <div id="close2" role="option" class="weui-mask"></div>
            <div id="dialog_2" class="weui-half-screen-dialog">
                <div class="weui-half-screen-dialog__hd">
                  <div class="weui-half-screen-dialog__hd__side">
                    <button style="display: none;" class="weui-icon-btn">返回<i class="weui-icon-back-arrow-thin"></i></button>
                    <button class="js_close 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" id="title2">标题</strong>
                    <span class="weui-half-screen-dialog__subtitle">标题</span>
                  </div>
                  <div class="weui-half-screen-dialog__hd__side">
                    <button class="weui-icon-btn">更多<i class="weui-icon-more"></i></button>
                  </div>
                </div>
                <div class="weui-half-screen-dialog__bd">
                  <p class="weui-half-screen-dialog__desc">
                    辅助描述内容，可根据实际需要安排
                  </p>
                  <p class="weui-half-screen-dialog__tips">
                    辅助提示内容，可根据实际需要安排
                  </p>
                </div>
                <div class="weui-half-screen-dialog__ft">
                    <a href="javascript:" role="button" class="weui-btn weui-btn_default">辅助操作</a>
                    <a href="javascript:" role="button" class="weui-btn weui-btn_primary">主操作</a>
                </div>
            </div>
        </div>
        <!--END dialog2-->
    </div>
</div>
<script type="text/javascript">
  var btn1 = document.getElementById("btn1");
  var close1 = document.getElementById("close1");
  var dialog1 = document.getElementById("dialog1");
  var dialog_1 = document.getElementById("dialog_1");
  btn1.addEventListener('click',function(){
    $('#dialog1').attr('aria-modal','true');
    $('#dialog1').fadeIn(200);
    dialog_1.classList.add("weui-half-screen-dialog_show");
    setTimeout(function(){
      dialog1.focus();
    },300)
  },false)
  close1.addEventListener('click',function(){
    $('#dialog1').attr('aria-modal','false');
    $('#dialog1').fadeOut(200);
    dialog_1.classList.remove("weui-half-screen-dialog_show");
    setTimeout(function(){
      btn1.focus();
    },300)
  },false)

  var btn2 = document.getElementById("btn2");
  var close2 = document.getElementById("close2");
  var dialog2 = document.getElementById("dialog2");
  var dialog_2 = document.getElementById("dialog_2");
  btn2.addEventListener('click',function(){
    $('#dialog2').attr('aria-modal','true');
    $('#dialog2').fadeIn(200);
    dialog_2.classList.add("weui-half-screen-dialog_show");
    setTimeout(function(){
      dialog2.focus();
    },300)
  },false)
  close2.addEventListener('click',function(){
    $('#dialog2').attr('aria-modal','false');
    $('#dialog2').fadeOut(200);
    dialog_2.classList.remove("weui-half-screen-dialog_show");
    setTimeout(function(){
      btn2.focus();
    },300)
  },false)

</script>