模態框
模態對話框(Modal Dialogue Box,又叫做模式對話框),是指在用戶想要對對話框以外的應用程序進行操作時,必須首先對該對話框進行響應。如單擊【確定】或【取消】按鈕等將該對話框關閉,還有固定時間自動消失等,可根據需要自行設計。
使用模態框需先在index.haml(針對rubymine開發工具)下引入下列兩個js(注意先後順序):
%script(lang="javascript" src="lib/js/jquery/jquery-1.8.2.min.js") %script(lang="javascript" src="lib/js/angular/bootstrap.js")
haml代碼:
.modal.fade#myModalname .modal-dialog .modal-content .modal-header %button.close(aria-hidden = "true" data-dismiss = "modal" type = "button") × %h4.modal-title .modal-body %center 可編輯內容 .modal-footer
對應html代碼:
<div class="modal fade ng-scope" id="myModalname">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<center>
可編輯內容
</center>
</div>
</div>
</div>
</div>
js方法 :
$timeout(function () { $('#ModalFalse').modal('show'); $timeout(function () { $('#ModalFalse').modal('hide'); }, 3000) }, 1)
#myModalname頁面的一個id,用於頁面數據綁定顯示;
加入$timeout實現頁面模態框按設定時間自動關閉,3000代表3秒,單位爲毫秒
同時在js主方法加入$timeout
function BidResultController($scope, $navigate, $timeout) { 方法體; }
簡單效果圖: