移动端网页简易自制弹出层

DOM结构

<p>我已经阅读并同意<a class="red-text" href="javascript:popupXieyi();">《用户合买代购协议》</a></p>

<div class="xieyi hide">
  <div class="pheader"><div class="ptitle center font18 white-text">用户购买协议</div></div>
  <div class="pbody white font14" style="color:#bfbfbf;">
    <p style="text-indent:2em;">本协议系甲、乙双方自愿签订，甲方愿意将自己购买于 年 月 日的 色 电动车 转让给乙方，乙方愿意购买并接管上述产品并达成以下协议，本协议自签订之日起执行。</p>
    <p>1、甲方愿意以 元的价格出售自己私有的电动车，出售后不得随意以任何理由提高或者更改价格；</p>
    <p>2、甲方将电动车一经转让给乙方后，不再为此车辆承任何责任；同时，不再对该车辆享有任何权利；</p>
    <p>3、乙方愿意接受上述价格，并且在交接车辆当日检查无误后接管该电动车，不得以其他任何理由调价或者退还车辆；</p>
    <p>4、乙方一经接管该车辆后，应该对自身安全及车辆安全负全部责任，比如：车辆及零部件的损坏、车辆被盗或者交通事故等。</p>
    <p>5、甲、乙双方除了交接车辆以外，甲方应该将当初购车时的原始票据、车辆三包凭证、使用说明书、行驶证等相关证件全部交接给乙方。</p>
    <p>6、以上协议达成共识，一式两份，甲、乙双方各执一份。如有任何不尽之处，有甲、乙双方协商解决。</p>
  </div>
  <div class="pfooter white"><a class="btn-red btn-center" href="javascript:void(0);" id="btnXieyi">确定</a></div>
</div>

DOM结构中主要有容器xieyi，初始状态为隐藏。容器xieyi中有结构容器pheader、pbody、pfooter。容器pheader用于存放弹出层标题，容器pfooter用于存放确定按钮。弹出层以body标签或container为父级。

CSS

.hide { display: none; opacity: 0; }
.pheader{
  height: 22px;
  background: #e23600;
  padding: 11px 16px 11px 5px;
  position: relative;
}
.pbody{ height:70%; overflow:scroll; padding: 1em; }
.pbody p{ margin-bottom: 10px; }
.pfooter{ padding-bottom: 10px; width: 100%;}
.popup{
  position: fixed;
  width: 90%;
  height: 60%;
  overflow: hidden;
  left: 5%;
  top: 15%;
  z-index: 100;
}

CSS主要对弹出层弹出时的容器poppu进行了fixed定位，包括大小、位置、所在层z-index。

对于pheader、pbody、pfooter等弹出层的结构容器主要定义了器高度。pheader、pfooter可以是绝对值，pbody需要是百分比，以保证在不同的设备上有良好的显示。

pbody里面存放的是大量的文本内容，为其设置overflow:scroll防止设备比较小是pbody溢出，就是加了个滚动条。

JS

function popupXieyi(){
  $(".xieyi").removeClass("hide").addClass("popup");
  $("#btnXieyi").click(function(){
    $(".xieyi").removeClass("popup").addClass("hide");
  });
}

JS部分，点击协议部分的链接打开弹出层，点击弹出层内部的确定按钮，隐藏弹出层。

简易的弹出层，省略了动画效果。