<!DOCTYPE html>
<html ng-app="angularStrap.modalDemo">
<head>
<meta charset="utf-8" />
<title>AngularStrap Modal Example</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-motion/styles/angular-motion.min.css">
<script src="//code.angularjs.org/1.3.5/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.5/angular-animate.min.js"></script>
<script src="//code.angularjs.org/1.3.5/angular-sanitize.min.js"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<h2>From the controller</h2>
<button type="button" class="btn btn-lg btn-primary" ng-click="showModalOne()">
<small>1. Using an object</small>
</button>
<!-- You can use a custom html template with the `data-template` attr -->
<button type="button" class="btn btn-lg btn-primary" ng-click="showModalTwo()">
<small>2. Using a template</small>
</button>
<h2>From the view</h2>
<button type="button" class="btn btn-lg btn-primary" data-animation="am-fade-and-scale" data-placement="center" bs-modal="myModalThree">
<small>3. Using an object</small>
</button>
<button type="button" class="btn btn-lg btn-primary" data-animation="am-fade-and-slide-top" data-template="modal-tpl.html" bs-modal="myModalFour">
<small>4. Using a template</small>
</button>
</div>
<div>
<p>n° 4 need ngSanitize to be injected to avoid an error on the display of the title. I don't know why. </p>
</div>
</body>
</html>
/* Put your css in here */
body {
padding: 40px !important;
}
var app = angular.module('angularStrap.modalDemo', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);
'use strict';
angular.module('angularStrap.modalDemo')
.controller('ModalDemoCtrl', function($scope, $modal) {
var myModalOne = $modal({title: 'Modal One', content: 'Hello Modal<br />This is a multiline message!', show: false});
$scope.showModalOne = function() {
myModalOne.$promise.then(myModalOne.show);
};
$scope.hideModalOne = function() {
myModalOne.$promise.then(myModalOne.hide);
};
var myModalTwo = $modal({title: 'Modal Two', content: 'Hello Modal<br />This is a multiline message!', show: false, template: "modal-tpl.html"});
$scope.showModalTwo = function() {
myModalTwo.$promise.then(myModalTwo.show);
};
$scope.hideModalTwo = function() {
myModalTwo.$promise.then(myModalTwo.hide);
};
$scope.myModalThree = {title: 'Modal three', content: 'Hello Modal<br />This is a multiline message!'};
$scope.myModalFour = {title: 'Modal four', content: 'Hello Modal<br />This is a multiline message!'};
});
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" ng-show="title">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="modal-title" ng-bind-html="title"></h4>
</div>
<div class="modal-body">
{{content}}
<h4>Text in a modal</h4>
<p ng-bind-html="content"></p>
<pre>2 + 3 = {{ 2 + 3 }}</pre>
<h4>Popover in a modal</h4>
<p>This <a href="#" role="button" class="btn btn-default popover-test" data-title="A Title" data-content="And here's some amazing content. It's very engaging. right?" bs-popover>button</a> should trigger a popover on click.</p>
<h4>Tooltips in a modal</h4>
<p><a href="#" class="tooltip-test" data-title="Tooltip" bs-tooltip>This link</a> and <a href="#" class="tooltip-test" data-title="Tooltip" bs-tooltip>that link</a> should have tooltips on hover.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
<button type="button" class="btn btn-primary" ng-click="$hide()">Save changes</button>
</div>
</div>
</div>
</div>