angularjs模態(tài)框的使用代碼實(shí)例
這篇文章主要介紹了angularjs模態(tài)框的使用代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
編寫html頁面
1.觸發(fā)模態(tài)框的點(diǎn)擊事件
<div>
<button type="button" class="btn btn-primary" ng-click="openAddModal()" data-toggle="modal"
data-target="#documentOprModal" style="margin-left: 10px;float:left">
<i class="glyphicon glyphicon-plus"></i>{{ 'i18n.add' | translate }}
</button>
</div>
2.模態(tài)框頁面
<div class="modal fade" id="documentOprModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" role="document" style="width: 600px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> 文檔入庫(kù)</h4>
</div>
<div class="modal-body">
<!--開發(fā)-->
<form name="docForm" id="docForm" novalidate>
<!-- 分類 -->
<div class="form-group">
<label class="col-lg-12 col-md-12 col-xs-12" style="padding: 0;">分類:</label>
<div class="input-group col-lg-12 col-md-12 col-xs-12">
<div class="input-group">
<input type="text" ng-model="document.classification_name" class="form-control"
placeholder="選擇分類">
<div class="input-group-btn">
<button type="button" class="btn btn-default" style="height: 30px"
ng-click="toggleDetail()"> <span class="caret"></span></button>
</div>
</div>
<div ng-show="isShowDetail" style="position: absolute;z-index: 9999;width: 560px;">
<div class="panel panel-default">
<div class="panel-body list-group list-group-contacts">
<div>
<ul id="classify-tree" class="ztree"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 星級(jí) -->
<div class="form-group">
<label class="col-lg-12 col-md-12 col-xs-12" style="padding: 0;">星級(jí):</label>
<div class="input-group col-lg-12 col-md-12 col-xs-12">
<ui-select ng-model="document.starGrade" theme="selectize">
<ui-select-match placeholder="請(qǐng)選擇星級(jí)">
<span ng-bind="$select.selected.name"></span>
</ui-select-match>
<ui-select-choices
repeat="item.id as item in (starGrades | filter: $select.search) track by $index ">
<div ng-bind-html="item.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
</div>
<!-- 井號(hào) -->
<div class="form-group">
<label for="jhText">井號(hào):</label>
<input type="text" class="form-control" id="jhText" ng-model="document.jh">
</div>
<!-- 作者 -->
<div class="form-group">
<label for="authorText">作者:</label>
<input type="text" class="form-control" id="authorText" ng-model="document.author">
</div>
<!-- 單位 -->
<div class="form-group">
<label for="unitText">單位:</label>
<input type="text" class="form-control" id="unitText" ng-model="document.unit">
</div>
<!-- 日期 -->
<div class="form-group">
<label for="writeDate">寫作日期:</label>
<input type="date" class="form-control" id="writeDate" ng-model="document.writeDate">
</div>
<!-- 簡(jiǎn)介 -->
<div class="form-group">
<label for="introductionTextArea">簡(jiǎn)介:</label>
<textarea class="form-control" id="introductionTextArea" ng-model="document.introduction"
rows="5" cols="60"></textarea>
</div>
<!-- 可能的查詢關(guān)鍵字 -->
<div class="form-group">
<label for="keyPackageTextArea">可能的查詢關(guān)鍵字:</label>
<textarea class="form-control" id="keyPackageTextArea" ng-model="document.keyPackage" rows="5"
cols="60"></textarea>
</div>
<!-- 文件 -->
<div class="form-group">
<div id="inputContent">
<input id="importFile" type="file" name="file" class="file-loading">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="submitFileInfo()"><i class="fa fa-check"></i>{{ 'i18n.save'
| translate }}
</button>
<button type="button" class="btn btn-default" data-dismiss="modal" style="margin: 0px 20px;"><i
class="fa fa-ban"></i>{{
'i18n.cancel' | translate }}
</button>
</div>
</div>
</div>
</div>
3.編寫對(duì)應(yīng)的js
/**
* 點(diǎn)擊 添加事件打開模態(tài)框
*/
function openAddModal() {
$('#documentOprModal').modal({
show: true,
keyboard: false,
backdrop: 'static'
});
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)計(jì)算圓周率到小數(shù)點(diǎn)后100位的方法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)計(jì)算圓周率到小數(shù)點(diǎn)后100位的方法,簡(jiǎn)單分析了圓周率計(jì)算的原理并結(jié)合實(shí)例形式給出了javascript計(jì)算圓周率的具體操作技巧,需要的朋友可以參考下2018-05-05
JavaScript表單驗(yàn)證實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗(yàn)證的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
JavaScript選擇排序算法原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了JavaScript選擇排序算法原理與實(shí)現(xiàn)方法,簡(jiǎn)單分析了選擇排序算法的概念、原理并結(jié)合實(shí)例形式分析了JavaScript選擇排序算法的相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2018-08-08
用 js 的 selection range 操作選擇區(qū)域內(nèi)容和圖片
本篇文章主要介紹了用js的selection range操作選擇區(qū)域內(nèi)容和圖片的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
js實(shí)現(xiàn)點(diǎn)擊每個(gè)li節(jié)點(diǎn),都彈出其文本值及修改
本篇文章主要分享了js實(shí)現(xiàn)點(diǎn)擊每個(gè)li節(jié)點(diǎn),都彈出其文本值及修改的實(shí)例代碼,具有很好的參考價(jià)值,需要的朋友一起來看下吧2016-12-12
用js實(shí)現(xiàn)控件的隱藏及style.visibility的使用
用js控制控件的隱藏,使用style.visibility實(shí)現(xiàn) ,具體代碼如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-06-06

