第五个页面 移动端

这是第五个页面 移动端 

移动端最麻烦的就是弹框

这次又踩了弹框的坑

不过这次终于掌握了写弹框的终极技术！

首先最外层包裹一层div 样式是：

position: fixed;
width: 100%;
height: 100%;
z-index: 100;
text-align: center;
top: 0;
left: 0;

然后里面先包裹一层div样式是：

position: fixed;
top: 0;
width: 300px;
margin: auto;
height: 360px;
z-index: 9999;
text-align: center;
left: 0;
right: 0;
bottom: 0;

这个div就是垂直水平都居中的

将这个div的高度和宽度都设置成固定像素大小，这样就不会因为不同手机上字体一样大而其他元素的宽度高度都是百分比定位而乱掉

然后将对话框背景切成图作为img元素加到页面中，img样式：

width：100%；

内部元素：都用absolute定位

HTML：

<div class="hide" id="box-yuyue" >
<div class="wrap">
    <img src="libao.png" style="width:100%">
    <div class="close"></div>
    <div class="telephone">
        <label for="phoneNum" >手机号码</label>
        <input id="phoneNum" type="text" maxlength="11" placeholder="请输入手机号码" >
        <p class="tips" >请输入正确的手机号码</p>
    </div>

    <div class="device clearfix">
        <div class="label"  >手机系统</div>
        <div id="device-ios" class="device-choice current" data-device="ios">iOS</div>
        <div id="device-andriod" class="device-choice" data-device="android">Android</div>
    </div>
    <div id="submit"></div>
</div>
</div>

CSS：

JavaScript：