Bootstrap与Angularjs的模态框实例代码
更新时间:2017年08月03日 13:29:31 作者:醉小义
这篇文章主要介绍了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的模态框实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
这篇文章主要介绍了用ANGULAR实时获取本地LOCALSTORAGE数据,实现一个模拟后台数据登入的效果的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下2016-11-11基于Angular中ng-controller父子级嵌套的相关属性详解
今天小编就为大家分享一篇基于Angular中ng-controller父子级嵌套的相关属性详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10Angular.js中上传指令ng-upload的基本使用教程
这篇文章主要给大家介绍了关于Angular.js中上传指令ng-upload的基本使用方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07详解AngularJS用Interceptors来统一处理HTTP请求和响应
本篇文章主要介绍了AngularJS用Interceptors来统一处理HTTP请求和响应 ,具有一定的参考价值,有兴趣的可以了解一下2017-06-06Angular实践之将Input与Lifecycle转换成流示例详解
这篇文章主要为大家介绍了Angular实践之将Input与Lifecycle转换成流示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-02-02
最新评论