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 双色表格实现代码
Dec 08 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
vue实现简单瀑布流布局
May 28 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 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
php递归函数怎么用才有效
2018/02/24 PHP
js取float型小数点后两位数的方法
2014/01/18 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python属于软件吗
2020/06/18 Python
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
学校七一活动方案
2014/01/19 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
秸秆管理实施方案
2014/03/15 职场文书
公开服务承诺制度
2014/03/26 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
党小组意见范文
2015/06/08 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python