Skip to content

Instantly share code, notes, and snippets.

Created January 27, 2014 05:06
Show Gist options
  • Save jexchan/8643535 to your computer and use it in GitHub Desktop.
Save jexchan/8643535 to your computer and use it in GitHub Desktop.
A Pen by jexchan.

AngularJS BootStrap 3 Modal Dialogs

A dialog/modal service written in AngularJS, creates predefined easy to use dialogs (error,wait,notify,confirm,create) with Angular UI and Bootstrap 3

A Pen by jexchan on CodePen.


<html ng-app="modalTest">
<script src=""></script>
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<body ng-controller="dialogServiceTest" class="pad">
<h2>Bootstrap 3 & AngularJS Dialog/Modals</h2><br />
<div class="row">
<div class="col-md-12">
<button class="btn btn-danger" ng-click="launch('error')">Error Dialog</button>
<button class="btn btn-primary" ng-click="launch('wait')">Wait Dialog</button>
<button class="btn btn-default" ng-click="launch('notify')">Notify Dialog</button>
<button class="btn btn-success" ng-click="launch('confirm')">Confirm Dialog</button>
<button class="btn btn-warning" ng-click="launch('create')">Custom Dialog</button>
<br />
<div class="row">
<div class="col-md-12">
<span class="text-info">From Confirm Dialog</span>: {{confirmed}}
<br />
<div class="row">
<div class="col-md-12">
<span class="text-info">Your Name</span>: {{name}}
<br />
<a href="" target="_top"><strong>View My Blog Post</strong>: Redux: Creating an Application Dialog Service using AngularJS, Twitter Bootstrap & Angular UI-Bootstrap</a>
$scope.confirmed = 'You have yet to be confirmed!';
$ = '"Your name here."';
$scope.launch = function(which){
var dlg = null;
// Error Dialog
case 'error':
dlg = $dialogs.error('This is my error message');
// Wait / Progress Dialog
case 'wait':
dlg = $dialogs.wait(msgs[i++],progress);
// Notify Dialog
case 'notify':
dlg = $dialogs.notify('Something Happened!','Something happened that I need to tell you.');
// Confirm Dialog
case 'confirm':
dlg = $dialogs.confirm('Please Confirm','Is this awesome or what?');
$scope.confirmed = 'You thought this quite awesome!';
$scope.confirmed = 'Shame on you for not thinking this is awesome!';
// Create Your Own Dialog
case 'create':
dlg = $dialogs.create('/dialogs/whatsyourname.html','whatsYourNameCtrl',{},{key: false,back: 'static'});
$ = name;
$ = 'You decided not to enter in your name, that makes me sad.';
}; // end switch
}; // end launch
// for faking the progress bar in the wait dialog
var progress = 25;
var msgs = [
'Hey! I\'m waiting here...',
'About half way done...',
'Almost there?',
'Woo Hoo! I made it!'
var i = 0;
var fakeProgress = function(){
if(progress < 100){
progress += 25;
$rootScope.$broadcast('dialogs.wait.progress',{msg: msgs[i++],'progress': progress});
}; // end fakeProgress
}) // end dialogsServiceTest
$scope.user = {name : ''};
$scope.cancel = function(){
}; // end cancel
$ = function(){
}; // end save
$scope.hitEnter = function(evt){
if(angular.equals(evt.keyCode,13) && !(angular.equals($,null) || angular.equals($,'')))
}; // end hitEnter
}) // end whatsYourNameCtrl
$templateCache.put('/dialogs/whatsyourname.html','<div class="modal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title"><span class="glyphicon glyphicon-star"></span> User\'s Name</h4></div><div class="modal-body"><ng-form name="nameDialog" novalidate role="form"><div class="form-group input-group-lg" ng-class="{true: \'has-error\'}[nameDialog.username.$dirty && nameDialog.username.$invalid]"><label class="control-label" for="username">Name:</label><input type="text" class="form-control" name="username" id="username" ng-model="" ng-keyup="hitEnter($event)" required><span class="help-block">Enter your full name, first &amp; last.</span></div></ng-form></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button><button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(nameDialog.$dirty && nameDialog.$invalid) || nameDialog.$pristine">Save</button></div></div></div></div>');
}]); // end run / module
/* Fix for Bootstrap 3 with Angular UI Bootstrap */
.modal {
display: block;
/* Custom dialog/modal headers */
.dialog-header-error { background-color: #d2322d; }
.dialog-header-wait { background-color: #428bca; }
.dialog-header-notify { background-color: #eeeeee; }
.dialog-header-confirm { background-color: #333333; }
.dialog-header-error span, .dialog-header-error h4,
.dialog-header-wait span, .dialog-header-wait h4,
.dialog-header-confirm span, .dialog-header-confirm h4 { color: #ffffff; }
/* Ease Display */
.pad { padding: 25px; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment