Skip to content

Instantly share code, notes, and snippets.

@mani95lisa

mani95lisa/modal.html

Created May 18, 2014 09:06
Show Gist options
  • Save mani95lisa/b3f6691a2785c93c3642 to your computer and use it in GitHub Desktop.
Save mani95lisa/b3f6691a2785c93c3642 to your computer and use it in GitHub Desktop.
Download ZIP
strap
Raw
modal.html
<!DOCTYPE html>
<html ng-app="mgcrea.ngStrapDocs">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/angular-motion.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/bootstrap-additions.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/libraries.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/main.min.css">
<script src="//code.angularjs.org/1.2.16/angular.min.js" data-semver="1.2.16"></script>
<script src="//code.angularjs.org/1.2.16/angular-animate.min.js" data-semver="1.2.16"></script>
<script src="//code.angularjs.org/1.2.16/angular-sanitize.min.js" data-semver="1.2.16"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.0.2"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.0.2"></script>
<script src="app.js"></script>
<script src="//mgcrea.github.io/angular-strap/scripts/docs.tpl.min.js" data-semver="v2.0.2"></script>
</head>
<body ng-controller="MainCtrl">
<div class="bs-docs-section" ng-controller="ModalDemoCtrl">
<div class="page-header">
<h1 id="modals">Modals <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/modal/modal.js" target="_blank">modal.js</a>
</h1>
<code>mgcrea.ngStrap.modal</code>
</div>
<h2 id="modals-examples">Examples</h2>
<p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
<h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="modal/docs/modal.demo.html" data-content-js-url="modal/docs/modal.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip>clog.info</a></h3>
<pre class="bs-example-scope">$scope.modal = {{modal | json}};</pre>
<div class="bs-example" style="padding-bottom: 24px;" append-source>
<!-- Button to trigger a default modal with a scope as an object {title:'', content:'', etc.} -->
<button type="button" class="btn btn-lg btn-primary" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">Click to toggle modal
<br />
<small>(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-danger" data-animation="am-fade-and-slide-top" data-template="modal/docs/modal.tpl.demo.html" bs-modal="modal">Custom Modal
<br />
<small>(using data-template)</small>
</button>
</div>
<div class="callout callout-info">
<h4>Backdrop animation</h4>
<p>Backdrop animation being powered by <code>ngAnimate</code>, it requires custom CSS.</p>
<pre class="bs-exemple-code">
<code class="css" highlight-block>
.modal-backdrop.am-fade {
opacity: .5;
transition: opacity .15s linear;
&.ng-enter {
opacity: 0;
&.ng-enter-active {
opacity: .5;
}
}
&.ng-leave {
opacity: .5;
&.ng-leave-active {
opacity: 0;
}
}
}
</code>
</pre>
</div>
<h2 id="modals-usage">Usage</h2>
<p>Append a <code>bs-modal</code>attribute to any element to activate the directive.</p>
<div class="callout callout-info">
<h4>The module also exposes a <code>$modal</code>service</h4>
<p>Available for programmatic use (inside a directive/controller).</p>
<div class="highlight">
<pre>
<code class="javascript" highlight-block>
angular.module('myApp')
.controller('DemoCtrl', function($scope, $modal) {
// Show a basic modal from a controller
var myModal = $modal({title: 'My Title', content: 'My Content', show: true});
// Pre-fetch an external template populated with a custom scope
var myOtherModal = $modal({scope: $scope, template: 'modal/docs/modal.tpl.demo.html', show: false});
// Show when some event occurs (use $promise property to ensure the template has been loaded)
$scope.showModal = function() {
myOtherModal.$promise.then(myOtherModal.show);
};
})
</code>
</pre>
</div>
</div>
<h3>Options</h3>
<p>Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<p>For directives, you can naturally inherit the contextual <code>$scope</code> or leverage a custom one with an <a href="http://docs.angularjs.org/guide/expression">AngularJS expression</a> to evaluate as an object directly on the <code>bs-modal</code> attribute</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>animation</td>
<td>string</td>
<td>am-fade</td>
<td>apply a CSS animation powered by ngAnimate</td>
</tr>
<tr>
<td>backdropAnimation</td>
<td>string</td>
<td>am-fade</td>
<td>apply a CSS animation to backdrop powered by ngAnimate</td>
</tr>
<tr>
<td>placement</td>
<td>string</td>
<td>'top'</td>
<td>how to position the modal - top | bottom | center <small>(requires custom CSS)</small>.</td>
</tr>
<tr>
<td>title</td>
<td>string</td>
<td>''</td>
<td>default title value if <code>title</code>attribute isn't present</td>
</tr>
<tr>
<td>content</td>
<td>string</td>
<td>''</td>
<td>default content value if <code>data-content</code>attribute isn't present</td>
</tr>
<tr>
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>replace <code>ng-bind</code> with <code>ng-bind-html</code>, requires <code>ngSanitize</code> to be loaded</td>
</tr>
<tr>
<td>backdrop</td>
<td>boolean or the string <code>'static'</code>
</td>
<td>true</td>
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code>for a backdrop which doesn't close the modal on click.</td>
</tr>
<tr>
<td>keyboard</td>
<td>boolean</td>
<td>true</td>
<td>Closes the modal when escape key is pressed</td>
</tr>
<tr>
<td>show</td>
<td>boolean</td>
<td>true</td>
<td>Shows the modal when initialized.</td>
</tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element -&nbsp;which will
prevent the popover from floating away from the triggering element during a window resize.</p>
</td>
</tr>
<tr>
<td>template</td>
<td>path</td>
<td>false</td>
<td>
<p>If provided, overrides the default template, can be either a remote URL or a cached template id.</p>
<p>It should be a <code>div.modal</code> element following Twitter Bootstrap styles conventions (<a href="//github.com/mgcrea/angular-strap/blob/master/src/modal/modal.tpl.html" target="_blank">like this</a>).</p>
</td>
</tr>
<tr>
<td>contentTemplate</td>
<td>path</td>
<td>false</td>
<td>
<p>If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached template id.</p>
</td>
</tr>
<tr>
<td>prefixEvent</td>
<td>string</td>
<td>'modal'</td>
<td>
<p>If provided, prefixes the events '.hide' '.hide.after' '.show' and '.show.after' with the passed in value. With the default value these events are 'modal.hide' 'modal.hide.after' 'modal.show' and 'modal.show.after'</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="callout callout-info">
<h4>Default options</h4>
<p>You can override global defaults for the plugin with <code>$modalProvider.defaults</code>
</p>
<div class="highlight">
<pre class="bs-exemple-code">
<code class="javascript" highlight-block>
angular.module('myApp')
.config(function($modalProvider) {
angular.extend($modalProvider.defaults, {
animation: 'am-flip-x'
});
})
</code>
</pre>
</div>
</div>
<h3>Scope methods</h3>
<p>Methods available inside the directive scope to toggle visibility.</p>
<h4>$show()</h4>
<p>Reveals the modal.</p>
<h4>$hide()</h4>
<p>Hides the modal.</p>
<h4>$toggle()</h4>
<p>Toggles the modal.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment