angularjs 简易模态框

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{width: 100%;background: rgba(0,0,0,0.5);position:absolute;top:0;}
.modals>div{overflow:hidden;width: 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{width: 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;width: 324px;}
.modals>div>.modalsonoff>button{float: left;margin: 0 5px;width: 150px;}

控制器：（和警告消息框alert中相同）

弹出文本：（在之前写alert中的地方加入）

$scope.modalsonoff ="您确定提交答案么？";
$scope.modalson=function (){/*在此处写确定后的处理函数*/}