Angularjs Bootstrap 3 Modal service - Ekathuwa
JavaScript ApacheConf HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

ngEkathuwa - v0.3.0

Angularjs Bootstrap 3 Modal service - Ekathuwa

============================================== Examples: ngEkathuwa

This given you to easily handle Bootstrap 3 Modal window with Angularjs.
It is more flexible...
It is responsive...
Can be use custom sizes...
Working with templates...
It used promisses when you need...
You can dynamically show/hide...

Getting Start

  1. Include <link rel="stylesheet" href="//"> in the head of your document.
  2. Include <script src="//"></script>
  3. Include <script src="//"></script>
  4. Include <script src="//"></script>
  5. Then include ekathuwa.min.js (bower install ngEkathuwa)
  6. Declare a module dependency, in your module '[ngEkathuwa]'
  7. Declare a controller dependency, in your controller $ekathuwa
  8. Then use it $ekathuwa.modal(options)

Depend on: angularjs, bootstrap, jquery

Ekathuwa API and examples


ngEkathuwa Options
Default options
id:                (string)    "ekathuwaModalID"
scope:                         $rootScope
controller:        (string)    null
show:              (boolean)   true
backdrop:          (boolean)   true
keyboard:          (boolean)   true
remote:            (boolean)   false
contentStyle:      (string)    null
contentCustomSize: (number)    0
contentPreSize:    (string)    "df", //df,sm,md,lg,fl
templateURL:       (string)    null
templateHTML:      (string)    null
bodyTemplateURL:   (string)    null
bodyTemplate:      (string)    null
header:            (boolean)   true
headerClass:       (string)    " "  //css style class
headerText:        (string)    null
headerTemplate:    (string)    null
headerCloseBtn:    (boolean)   true
headerDraggable:   (boolean)   true
footer:            (boolean)   true
footerClass:       (string)    " "  //css style class
footerTemplate:    (string)    null
footerCloseBtn:    (boolean)   true
footerCloseBtnText:(string)    "Close"
footerSaveBtn:     (boolean)   false
footerSaveBtnText: (string)    "Save changes"
//Basic Modal
$scope.ekathuwaModalBasic = function () {
        id: "ekathuwaModalBasicId",
        headerText:"Ekathuwa modal header",

//Fullscreen Modal
$scope.ekathuwaModalTemp = function () {
        id: "ekathuwaModalTempId",
        scope: $scope,
        templateURL: "modal-template.html",
        contentPreSize: "fl"

//Modal by template with stylish(350px width overwrite from 80%)
$scope.ekathuwaModalStyle = function () {
        id: "ekathuwaModalTempId",
        scope: $scope,
        templateURL: "modal-template.html",
        contentStyle: "width:350px;heigth:400px;background-color:#1b78f7;",
        contentCustomSize: 80

//Large screen modal with inline html
$scope.ekathuwaModalTempHTML = function () {
        id: "ekathuwaTemlHTMLId",
        scope: $scope,
        contentPreSize: "lg",
        templateHTML: '<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="ekathuwaTemlHTMLId" style="display: none;"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button><h4 id="myModalLabel" class="modal-title">Ekathuwa Modal Heading</h4></div><div class="modal-body"><h4>Ekathuwa modal body.</h4><button class="btn btn-warning" ng-click="btnMsgFromCntl()">Get Message</button><div class="modal-footer"><button data-dismiss="modal" class="btn btn-default" type="button">Close</button><button class="btn btn-primary" type="button">Save changes</button></div></div></div></div>'

//Modal body from template and set header text
$scope.ekathuwaModalBodyTempURL = function () {
        id: "ekathuwaBodyTempLId",
        scope: $scope,
        headerText:"Ekathuwa modal header",
        bodyTemplateURL: 'modal-template-body.html'

//Footerless modal
$scope.ekathuwaModalFooterless = function () {
        id: "ekathuwaBodyTempLId",
        scope: $scope,
        headerText:"Ekathuwa modal header",
        bodyTemplateURL: 'modal-template-body.html',

//Headerless modal
$scope.ekathuwaModalHeaderless = function () {
        id: "ekathuwaBodyTempLId",
        scope: $scope,
        bodyTemplateURL: 'modal-template-body.html',

//Header/Footer stylish from css class modal
//Usefull for set your all modals header to same style
$scope.ekathuwaModalHeaderless = function () {
        id: "ekathuwaBodyTempLId",
        scope: $scope,
        bodyTemplateURL: 'modal-template-body.html',
        headerClass : "ribbon blue",  //set your css class
        footerClass : "color-footer blue"  //set your css class

//Modal via template body Url and show hide with promisess
$scope.ekathuwaModalPromisses = function () {
   var promise = $ekathuwa.modal({
        id: "ekathuwaPromisId",
        show: false,
        scope: $scope,
        bodyTemplateURL: 'modal-template-body.html',
        headerText:"Modal with promisses"
    promise.then(function (elem) {
Option Value Description
id default: ekathuwaModalID Set your modal ID.
Id avoid namespace collisions.Most important, when modal inside modal(nested modal)
scope default: $rootScope Pass your scope.
controller default: null Pass your controller.
show default: true Shows the modal when initialized.
You can show/hide modal using promisses.
var p = $ekathuwa.modal({id:"modalPromisses",show:false});
$q.when(p).then(function (m) { m.modal('show'); });
backdrop default: true Includes a modal-backdrop element. Alternatively, specify staticfor a backdrop which doesn't close the modal on click.
keyboard default: true Closes the modal when escape key is pressed
contentStyle default: null Set modal style.If you set width, modal not be responsive. Use " ;" for style seperation.
contentCustomSize default: null Set modal percentage(%) width. Not need to mention "%", Only need value.
It overwrite contentStyle's width.
contentPreSize default: null Set modal width by inbuild value.
df= Bootstrap's default modal width
sm= small width
md= medium width
lg= large width
fl= full width
templateURL default: null Pass your HTML modal page template as URL.
$ekathuwa.modal({ id: "ekathuwaModalTempId", scope: $scope, templateURL: "./views/modal-template1.html" });
templateHTML default: null Pass your modal page as HTML tags. This required nessery HTML elements for show modal. Refer Bootstrap3 document.
$ekathuwa.modal({ id: 'ekathuwaTemlHTMLId', scope: $scope, contentPreSize: 'fl', templateHTML:''});
bodyTemplateURL default: null Pass your modal page's body as template URL.
It used default header and footer.
$ekathuwa.modal({ id: "ekathuwaBodyTempLId", scope: $scope, bodyTemplateURL: './views/modal-template-body.html' });
bodyTemplate default: null Pass your modal page's body as inline HTML.
It used default header and footer. Discard when you set bodyTemplateURL
$ekathuwa.modal({ id: "ekathuwaBodyTempLHTMLId", scope: $scope, bodyTemplate: 'This is a modal body' });
header default: true Set modal header visible or not.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, header: false });
headerTemplate default: null Pass your modal header as inline HTML.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, headerTemplate: 'This is a modal header' });
headerText default: null Set header text.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, headerText: "This is header" });
headerCloseBtn default: true Show/Hide header close button.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, headerCloseBtn: false });
footer default: true Set modal footer visible or not.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, footer: false });
footerTemplate default: null Pass your modal footer as inline HTML.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, footerTemplate: 'This is footer' });
footerCloseBtn default: true Show/Hide footer close button.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, footerCloseBtn: false });
footerCloseBtnText default: 'Close' Close button text.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, footerCloseBtn: true, footerCloseBtnText: 'OK' });
footerSaveBtn default: false Show/Hide footer save button.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, footerSaveBtn: true });
footerSaveBtnText default: 'Save changes' Save button text.
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, footerSaveBtn: true, footerSaveBtnText: 'Save' });

For contributors

  1. npm install
  2. grunt build
  3. then pull request


Copyright 2013 Sarath Ambegoda. Released under the MIT License (MIT).

Bitdeli Badge