当前位置：首页 > 资讯 > 技术文档

Bootstrap与Angularjs的模态框实例代码

时间：2022-10-31 08:35 编辑：来源：阅读：
扫一扫，手机访问

摘要：Bootstrap与Angularjs的模态框实例代码

先给大家展示下效果图，感兴趣的朋友参考下实现代码吧效果图如下所示： [img]http://files.jb51.net/file_images/article/201708/2017080313272921.png[/img] 具体代码如下所示：

<!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>

[b]总结[/b] 以上所述是小编给大家介绍的Bootstrap与Angularjs的模态框实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：javascript浏览器窗口之间传递数据的方法
下一篇：分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]

资讯排行榜
更多>>