<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl" class="container">
<h1>$uibModal example</h1>
<button class="btn btn-primary" type="button" ng-click="openModal()">Open modal</button>
</body>
</html>
angular.module('app', [
'ui.bootstrap'
])
.controller('ctrl', function ($scope, $uibModal) {
'use strict';
$scope.openModal = function () {
$uibModal.open({
templateUrl: 'modal.html',
controller: function ($scope, $uibModalInstance) {
$scope.ok = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
})
};
});
/* Styles go here */
<div class="modal-header">
<h3 class="modal-title">Hello</h3>
</div>
<div class="modal-body">
I'm a modal!
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>