4.12

今天总结一下ionic 模态框的制作。
首先找到示例如下：

主要遇到的问题还是页面的问题，首先直接用ionic自带的头部和内容，手机端会占满整个屏幕，而且位置也没法调，所以只有用一个大的div来重新布局这个弹窗，这个大的div背景颜色用黑色半透明，里面再弄个内容div做到自适应大小。关于怎么手动自适应手机端，找到如下资料：

<div class="div1">
    <div class="div2">自适应浏览器水平垂直居中</div>
</div>
 

css代码：

.div1{
            width: auto;
            height: 600px;
            background: #cccccc;
            position: relative;
        }
.div2{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -600px;
            margin-top: -200px;
            width: 1200px;
            height: 400px;
            background: #4fcc8d;
            line-height: 400px;
            font-size: 36px;
            text-align: center;
        }
 

原理就是，先用 left：50%； top：50%； 让这个 div 的左上角位于页面正中，然后再利用 margin-left：－600px；margin-top:-200px；使div向左向上移动它自身宽高的一半，最终效果。

其实按照上面这样写，还是得不到我想要的自适应的。我最后写了固定高度，宽度自适应的效果，这样可以帮我解决两个问题，一个是弹窗内容居中的问题，因为宽度不自适应的话，做不到内容居中，还有一个头部fixed，如果高度大小不固定头部到顶端和内容到顶端的距离一直在变，导致头部内容没办法居中以及头部和内容重叠还有分离的问题。最后代码如下：

<ion-modal-view  style="background-color:rgba(0,0,0,0.5); ">

    <div style=" width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 100;">
    <div style="width: 60%;height: 260px;background-color:#ffffff ;background-size: cover;position: fixed;top: 50%;left: 50%;-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);z-index: 200;">
        <div class="row" style="height: 32px;padding:0;line-height:32px;background-color: #FF9900;width: 100%;position: fixed;top: 0;">
            <div class="col col-90" style="padding: 0;padding-left:20px;text-align: left;color: #FFFFFF;font-size: 16px;font-weight: 600;">品牌名</div>
            <div class="col" style="padding: 0;color: #ffffff;"  ng-click="modal.hide()" ><i class="ion-close"></i></div>
        </div>
        <div style="width: 100%;height: 230px;overflow-y: auto;position: absolute;top:30px;">
            <div style="width: 100%;height: 2000px;background-color: #fff;">
                <ul style="text-align: left;text-indent:20px;color: #000;overflow: hidden">
                    <li style="height: 40px;line-height: 40px;">奥迪sdgferg</li>
                    <li style="height: 40px;">奥迪dfg</li>
                    <li style="height: 40px;">奥迪sdgrg</li>
                    <li style="height: 40px;">奥迪dfg</li>
                    <li style="height: 40px;">奥迪sdgferg</li>
                    <li style="height: 40px;">奥迪dfg</li>
                    <li style="height: 40px;">奥迪sdgrg</li>
                    <li style="height: 40px;">奥迪dfg</li>
                    <li style="height: 40px;">奥迪sdgferg</li>
                    <li style="height: 40px;">奥迪dfg</li>
                    <li style="height: 40px;">奥迪sdgrg</li>
                    <li style="height: 40px;">奥迪dfg</li>
                    <li style="height: 40px;">奥迪sdgferg</li>
                    <li style="height: 40px;">奥迪dfg</li>
                    <li style="height: 40px;">奥迪sdgrg</li>
                    <li style="height: 40px;">奥迪dfg</li>
                </ul>

            </div>
        </div>
    </div>

    </div>


</ion-modal-view>