Bootstrap 과 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> 
총결산
위 에서 말 한 것 은 소 편 이 소개 한 Bootstrap 과 Angularjs 의 모드 상자 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기