主页 / 网络编程 /

Bootstrap与Angularjs的模态框实例代码

网络编程 2021-07-04 18:33www.168986.cn编程入门
这篇文章主要介绍了Bootstrap与Angularjs的模态框实例代码,需要的朋友可以参考下

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

效果图如下所示

具体代码如下所示

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
  <script src="https://cdn.bootcss./angular.js/1.4.6/angular.min.js"></script> 
  <link rel="stylesheet" href="https://cdn.bootcss./bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" > 
  <script src="https://cdn.bootcss./jquery/2.1.1/jquery.min.js"></script> 
  <script src="https://cdn.bootcss./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的模态框实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！

上一篇：详解基于vue的移动web app页面缓存解决方案 下一篇：基于 Bootstrap Datetimepicker 联动

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by