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 (){/*在此處寫確定后的處理函數*/}