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 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
利用vue实现模态框组件
Dec 19 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
详解react组件通讯方式(多种)
May 06 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
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
详解php用static方法的原因
2018/09/12 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
JavaScript Prototype对象
2009/01/07 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
简述vue中的config配置
2018/01/23 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
简单了解Python生成器是什么
2019/07/02 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
英文自荐信
2013/12/15 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
学校搬迁方案
2014/06/15 职场文书
体育教师求职信
2014/06/30 职场文书
个人自我剖析材料
2014/09/30 职场文书
离婚起诉书范本
2015/05/18 职场文书
公司的力量观后感
2015/06/05 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技