Bootstrap与Angularjs的模态框实例代码


Posted in Javascript onAugust 03, 2017

先给大家展示下效果图,感兴趣的朋友参考下实现代码吧

效果图如下所示:

Bootstrap与Angularjs的模态框实例代码

具体代码如下所示:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
  <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> 
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" > 
  <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> 
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
  <script > 
    angular.module("myApp",[]).controller("myControl",["$scope",function($scope){ 
      $scope.fun = function(){ 
        $('#basic').modal('show'); 
      } 
      $('#basic').on('hidden.bs.modal', function () { //模态框取消时触发的事件 
        // 执行一些动作... 
        alert("sadsfsdfds"); 
      }) 
    }]); 
  </script> 
</head> 
<body ng-app="myApp" ng-controller="myControl"> 
  <div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true"> 
    <div class="modal-dialog"> 
      <div class="modal-content"> 
        <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
          <h4 class="modal-title" id="title"> 
            模态框的标题 
          </h4> 
        </div> 
        <div class="modal-body"> 
          文本内容 
        </div> 
        <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 
          <button type="button" class="btn btn-primary">提交更改</button> 
        </div> 
      </div> 
    </div> 
  </div> 
  <!-- 
    两种方式去调用模态框 
  --> 
  <button type="button" ng-click="fun()">模态框</button> 
  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#basic"> 
    开始演示模态框 
  </button> 
<!-- 
data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。 
您可以在页面上创建多个在不同时间进行加载。 
--> 
</body> 
</html>

总结

以上所述是小编给大家介绍的Bootstrap与Angularjs的模态框实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 #Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 #Javascript
webpack开发跨域问题解决办法
Aug 03 #Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 #Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 #Javascript
解决ionic和angular上拉加载的问题
Aug 03 #Javascript
ES6学习教程之Map的常用方法总结
Aug 03 #Javascript
You might like
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
python科学计算之narray对象用法
2019/11/25 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
妇科医生自荐信
2013/11/05 职场文书
艺术设计专业个人求职信范文
2013/12/11 职场文书
员工考核管理制度
2014/02/02 职场文书
物业保安员岗位职责
2014/03/14 职场文书
操行评语大全
2014/04/30 职场文书
考研英语辞职信
2015/05/13 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书