angularjs 简易模态框
angularjs 中的模态框一般使用插件angular-ui-bootstrap书写。
这里记录一种简易的模态框写法:
1.警告消息框alert:
原理:
在html页面放入模态框样式代码,然后在控制器里面写下控制代码。
代码:
HTML页面:(写在view页面的最后)
<div class="modals" ng-show="modalstext" ng-style="modleheightmax"> <div > <p>{{modalstext}}</p> <button ng-click="modalstext=false">确定</button> </div> </div>
css:
.modals{ 100%;background: rgba(0,0,0,0.5);position:absolute;top:0;} .modals>div{overflow:hidden; 400px;height: 250px;border:2px solid #fff;margin: auto auto;border-radius: 10px;
background: url("../img/listback.png");background-size: 100% 100%;} .modals>div>p{font-size: 20px;color: #fff;height: 78px;margin:55px 60px;word-break:break-all;overflow: hidden} .modals>div>button{ 150px;margin:0 auto;display: block;}
控制器:(写在控制器的最开始)
/*获取页面高度*/ $scope.heightmax = $window.innerHeight; /*加载模态框高度*/ $scope.modleheightmax = {"height":$scope.heightmax-404+"px","padding-top":($scope.heightmax-200)/2+"px"};
弹出文本:(在之前写alert中的地方加入)
$scope.modalstext = "请输入验证码!";
2.确认消息框confirm
HTML页面:(写在view页面的最后)
<div class="modals" ng-show="modalsonoff" ng-style="modleheightmax"> <div > <p>{{modalsonoff}}</p> <div class="modalsonoff"> <button ng-click="modalson();modalsonoff=false;">确定</button> <button ng-click="modalsonoff=false">取消</button> </div> </div> </div>
css:除了和警告消息框alert中共用的的css外还需加上下面的部分,用来控制按钮样式。
.modals>div>.modalsonoff{margin:0 auto; 324px;} .modals>div>.modalsonoff>button{float: left;margin: 0 5px; 150px;}
控制器:(和警告消息框alert中相同)
弹出文本:(在之前写alert中的地方加入)
$scope.modalsonoff ="您确定提交答案么?"; $scope.modalson=function (){/*在此处写确定后的处理函数*/}