快捷導(dǎo)航

Bootstrap與Angularjs的模態(tài)框?qū)嵗a

更新時(shí)間：2017年08月03日 13:29:31 作者：醉小義

這篇文章主要介紹了Bootstrap與Angularjs的模態(tài)框?qū)嵗a,需要的朋友可以參考下

先給大家展示下效果圖，感興趣的朋友參考下實(shí)現(xiàn)代碼吧

效果圖如下所示：

具體代碼如下所示：

<!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"  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 () { //模態(tài)框取消時(shí)觸發(fā)的事件 
        // 執(zhí)行一些動(dòng)作... 
        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"> 
            模態(tài)框的標(biāo)題 
          </h4> 
        </div> 
        <div class="modal-body"> 
          文本內(nèi)容 
        </div> 
        <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button> 
          <button type="button" class="btn btn-primary">提交更改</button> 
        </div> 
      </div> 
    </div> 
  </div> 
  <!-- 
    兩種方式去調(diào)用模態(tài)框 
  --> 
  <button type="button" ng-click="fun()">模態(tài)框</button> 
  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#basic"> 
    開(kāi)始演示模態(tài)框 
  </button> 
<!-- 
data-target="#myModal" 是您想要在頁(yè)面上加載的模態(tài)框的目標(biāo)。您可以在頁(yè)面上創(chuàng)建多個(gè)模態(tài)框，然后為每個(gè)模態(tài)框創(chuàng)建不同的觸發(fā)器。 
您可以在頁(yè)面上創(chuàng)建多個(gè)在不同時(shí)間進(jìn)行加載。 
--> 
</body> 
</html>

總結(jié)

以上所述是小編給大家介紹的Bootstrap與Angularjs的模態(tài)框?qū)嵗a，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: