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 相关文章推荐
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
Require.js的基本用法详解
Jul 03 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
Vue中qs插件的使用详解
Feb 07 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更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
菜单效果
2006/10/14 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
深入理解Javascript中的this关键字
2015/03/27 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
python线程的几种创建方式详解
2019/08/29 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
演讲稿怎么写
2014/01/07 职场文书
中文师范生自荐信
2014/01/30 职场文书
写给老婆的检讨书
2014/02/21 职场文书
一年级小学生评语大全
2014/12/25 职场文书
优秀团队申报材料
2014/12/26 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers