angularjs模态框的使用代码实例


Posted in Javascript onDecember 20, 2019

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

编写html页面

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

<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.模态框页面

<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"> 文档入库</h4>
      </div>
      <div class="modal-body">
        <!--开发-->
        <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>
          <!-- 星级 -->
          <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">
              <ui-select ng-model="document.starGrade" theme="selectize">
                <ui-select-match placeholder="请选择星级">
                  <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>
          <!-- 井号 -->
          <div class="form-group">
            <label for="jhText">井号:</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>
          <!-- 简介 -->
          <div class="form-group">
            <label for="introductionTextArea">简介:</label>
            <textarea class="form-control" id="introductionTextArea" ng-model="document.introduction"
              rows="5" cols="60"></textarea>
          </div>
          <!-- 可能的查询关键字 -->
          <div class="form-group">
            <label for="keyPackageTextArea">可能的查询关键字:</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.编写对应的js

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

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

Javascript 相关文章推荐
JQuery查找DOM节点的方法
Jun 11 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
推荐几个不错的console调试技巧实现
Dec 20 #Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 #Javascript
node使用request请求的方法
Dec 20 #Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 #Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 #Javascript
js正则匹配多个全部数据问题
Dec 20 #Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 #Javascript
You might like
php中的观察者模式
2010/03/24 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
js特效,页面下雪的小例子
2013/06/17 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
Pytorch之Variable的用法
2019/12/31 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
给校长的建议书范文
2015/09/14 职场文书
Python类方法总结讲解
2021/07/26 Python
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
使用Python开发冰球小游戏
2022/04/30 Python