Bootstrap与Angularjs的模态框实例代码_网络技术_宿州市腾雀网络科技有限公司

Bootstrap与Angularjs的模态框实例代码

发布时间 - 2026-01-11 02:38:00 点击率：次

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

效果图如下所示：

具体代码如下所示：

<!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的模态框实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# bootstrap # angularjs # 模态框 # AngularJs的UI组件ui-Bootstrap之Tooltip和Popover # 详解Angular-ui-BootStrap组件的解释以及使用 # angular项目中bootstrap-datetimepicker时间插件的使用示例 # AngularJS+Bootstrap3多级导航菜单的实现代码 # AngularJs+Bootstrap实现漂亮的计算器 # Angular应用Bootstrap过程步骤逻辑详解 # 模态 # 多个 # 您可以 # 所示 # 小编 # 加载 # 在此 # 两种 # 要在 # 感兴趣 # 给大家 # 所述 # 您想 # 给我留言 # 感谢大家 # 先给 # 疑问请 # 有任何 # angular # min

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：新建站点二级目录绑定指南：路径配置与站群构建详解

下一篇：360浏览器收藏网页教程

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：新建站点二级目录绑定指南：路径配置与站群构建详解

下一篇：360浏览器收藏网页教程