Angularjs 自制手机端简易弹窗

准确的来说是angular模态框。（对于angular及其插件不太熟悉，只有自己写一个模态框）

DOM部分准备了两个div元素，第一个是作为背景层，其z-index略低于第二层的z-index。第二层是作为模态框的容器层。

<div class="modalbg" ng-show="popup.showModal"></div>
<my-modal class="mymodal" ng-show="popup.showModal"></my-modal>

angular的指令属性Directive，restrict默认是elements 和 attributes，故不用给。

app = angular.module("dltApp", []);
app.controller("specCtrl", ["$scope", function($location, $scope){
    $scope.popup = {
        showModal: false
    }
}]);
app.directive("myModal", function(){
    return {
        templateUrl: 'popup/my-modal.html'
    }
});

模态框template文件'popup/my-modal.html'，主要是三个结构容器pheader，pbody，pfooter

<div class="pheader"><div class="ptitle center x16 white-text">我的标题</div></div>
<div class="pbody white x14" style="color:#bfbfbf;"></div>
<div class="pfooter white"><a class="btn-red x14 btn-center" href="" ng-click="popup.showModal=false" id="btnClose">确定</a></div>

这样主要是.modalbg .mymodal样式，主要适用于手机端。

/* block modal */
.modalbg { position:absolute; left:0; top:0; width: 100%; height: 100%; background: #0b0b0b; opacity: 0.8; z-index: 499;}
.mymodal { width: 94%; min-height: 50%; position: fixed; left: 3%; top: 10%; z-index: 500;}
/* endblock modal */

在.pheader .pbody .pfooter里面定义了一下高度比。

.pheader{
    background: #e23600;
    height: 10%;
    padding: 8px 0;
}
.pbody{ height: 78%; overflow-y:scroll; padding: 1em; }
.pfooter{ height: 12%; border-top: 1px solid #eee; display: flex; align-items: center;}
.pbody p{ margin-bottom: 10px;}

一个模态框最紧要的也就是容器大小、位置和全背景的样式了，其次则是模态框内部的结构，最后才是打开和关闭的toggle事件。

最后是效果图

写此文做一下回顾，以供后来参考学习。