欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

Bootstrap与Angularjs的模态框实例代码

时间:2021-02-28 14:51:20|栏目: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> 

总结

上一篇:AngularJS 自定义指令详解及实例代码

栏    目:AngularJS

下一篇:angular或者js怎么确定选中ul中的哪几个li

本文标题:Bootstrap与Angularjs的模态框实例代码

本文地址:http://www.codeinn.net/misctech/71584.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有