Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
  <script>
    angular.module('myApp', ['ui.bootstrap']);
var myCtrl = function($scope, $modal){
  var modalInstance = $modal.open({
    templateUrl: "myModalTemplate.html",
    controller: function($scope){
        $scope.cancel = function(){
            modalInstance.dismiss();
        };
​
    }
});
}; 
  </script>
  </head>
<body ng-app='myApp'>
  <script type="text/ng-template" id="myModalTemplate.html">
  <div class="modal-header">
        <button type="button" class="close" ng-click="cancel()" aria-hidden="true">&times;</button>
        <h4>Heading</h4>
    </div>
        <div class="modal-body">
            Modal body
        </div>
        <div class="modal-footer">
            <button ng-click="cancel()" class="btn btn-primary">Close</button>
        </div>
  </script>
  <div ng-controller="myCtrl">
   
  </div>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers