准确的来说是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事件。
最后是效果图
写此文做一下回顾,以供后来参考学习。