angularjs模态框的使用代码实例

前端之家收集整理的这篇文章主要介绍了angularjs模态框的使用代码实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这篇文章主要介绍了angularjs模态框的使用代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

编写html页面

1.触发模态框的点击事件

  1. <div>
  2. <button type="button" class="btn btn-primary" ng-click="openAddModal()" data-toggle="modal"
  3. data-target="#documentOprModal" style="margin-left: 10px;float:left">
  4. <i class="glyphicon glyphicon-plus"></i>{{ 'i18n.add' | translate }}
  5. </button>
  6. </div>

2.模态框页面

  1. <div class="modal fade" id="documentOprModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  2. data-backdrop="static" data-keyboard="false">
  3. <div class="modal-dialog modal-lg" role="document" style="width: 600px;">
  4. <div class="modal-content">
  5. <div class="modal-header">
  6. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
  7. aria-hidden="true">×</span></button>
  8. <h4 class="modal-title" id="myModalLabel"> 文档入库</h4>
  9. </div>
  10. <div class="modal-body">
  11. <!--开发-->
  12. <form name="docForm" id="docForm" novalidate>
  13. <!-- 分类 -->
  14. <div class="form-group">
  15. <label class="col-lg-12 col-md-12 col-xs-12" style="padding: 0;">分类</label>
  16. <div class="input-group col-lg-12 col-md-12 col-xs-12">
  17. <div class="input-group">
  18. <input type="text" ng-model="document.classification_name" class="form-control"
  19. placeholder="选择分类">
  20. <div class="input-group-btn">
  21. <button type="button" class="btn btn-default" style="height: 30px"
  22. ng-click="toggleDetail()"> <span class="caret"></span></button>
  23. </div>
  24. </div>
  25. <div ng-show="isShowDetail" style="position: absolute;z-index: 9999;width: 560px;">
  26. <div class="panel panel-default">
  27. <div class="panel-body list-group list-group-contacts">
  28. <div>
  29. <ul id="classify-tree" class="ztree"></ul>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. <!-- 星级 -->
  37. <div class="form-group">
  38. <label class="col-lg-12 col-md-12 col-xs-12" style="padding: 0;">星级:</label>
  39. <div class="input-group col-lg-12 col-md-12 col-xs-12">
  40. <ui-select ng-model="document.starGrade" theme="selectize">
  41. <ui-select-match placeholder="请选择星级">
  42. <span ng-bind="$select.selected.name"></span>
  43. </ui-select-match>
  44. <ui-select-choices
  45. repeat="item.id as item in (starGrades | filter: $select.search) track by $index ">
  46. <div ng-bind-html="item.name | highlight: $select.search"></div>
  47. </ui-select-choices>
  48. </ui-select>
  49. </div>
  50. </div>
  51. <!-- 井号 -->
  52. <div class="form-group">
  53. <label for="jhText">井号:</label>
  54. <input type="text" class="form-control" id="jhText" ng-model="document.jh">
  55. </div>
  56. <!-- 作者 -->
  57. <div class="form-group">
  58. <label for="authorText">作者:</label>
  59. <input type="text" class="form-control" id="authorText" ng-model="document.author">
  60. </div>
  61. <!-- 单位 -->
  62. <div class="form-group">
  63. <label for="unitText">单位:</label>
  64. <input type="text" class="form-control" id="unitText" ng-model="document.unit">
  65. </div>
  66. <!-- 日期 -->
  67. <div class="form-group">
  68. <label for="writeDate">写作日期:</label>
  69. <input type="date" class="form-control" id="writeDate" ng-model="document.writeDate">
  70. </div>
  71. <!-- 简介 -->
  72. <div class="form-group">
  73. <label for="introductionTextArea">简介:</label>
  74. <textarea class="form-control" id="introductionTextArea" ng-model="document.introduction"
  75. rows="5" cols="60"></textarea>
  76. </div>
  77. <!-- 可能的查询关键字 -->
  78. <div class="form-group">
  79. <label for="keyPackageTextArea">可能的查询关键字:</label>
  80. <textarea class="form-control" id="keyPackageTextArea" ng-model="document.keyPackage" rows="5"
  81. cols="60"></textarea>
  82. </div>
  83. <!-- 文件 -->
  84. <div class="form-group">
  85. <div id="inputContent">
  86. <input id="importFile" type="file" name="file" class="file-loading">
  87. </div>
  88. </div>
  89. </form>
  90. </div>
  91. <div class="modal-footer">
  92. <button type="button" class="btn btn-primary" ng-click="submitFileInfo()"><i class="fa fa-check"></i>{{ 'i18n.save'
  93. | translate }}
  94. </button>
  95. <button type="button" class="btn btn-default" data-dismiss="modal" style="margin: 0px 20px;"><i
  96. class="fa fa-ban"></i>{{
  97. 'i18n.cancel' | translate }}
  98. </button>
  99. </div>
  100. </div>
  101. </div>
  102. </div>

3.编写对应的js

  1. /**
  2. * 点击 添加事件打开模态框
  3. */
  4. function openAddModal() {
  5. $('#documentOprModal').modal({
  6. show: true,keyboard: false,backdrop: 'static'
  7. });
  8. }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

猜你在找的JavaScript相关文章