============================================== Examples: ngEkathuwa
- Include
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">in the head of your document. - Include
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script> - Include
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> - Then include
ekathuwa.min.js - Declare a module dependency, in your module
'[ngEkathuwa'] - Declare a controller dependency, in your controller
$ekathuwa - Then use it
$ekathuwa.modal(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 footer: (boolean) true footerClass: (string) " " //css style class footerTemplate: (string) null footerCloseBtn: (boolean) true footerSaveBtn: (boolean) false
//Basic Modal
$scope.ekathuwaModalBasic = function () {
$ekathuwa.modal({
id: "ekathuwaModalBasicId",
headerText:"Ekathuwa modal header",
});
}
//Fullscreen Modal
$scope.ekathuwaModalTemp = function () {
$ekathuwa.modal({
id: "ekathuwaModalTempId",
scope: $scope,
templateURL: "modal-template.html",
contentPreSize: "fl"
});
}
//Modal by template with stylish(350px width overwrite from 80%)
$scope.ekathuwaModalStyle = function () {
$ekathuwa.modal({
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 () {
$ekathuwa.modal({
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 () {
$ekathuwa.modal({
id: "ekathuwaBodyTempLId",
scope: $scope,
headerText:"Ekathuwa modal header",
bodyTemplateURL: 'modal-template-body.html'
});
}
//Footerless modal
$scope.ekathuwaModalFooterless = function () {
$ekathuwa.modal({
id: "ekathuwaBodyTempLId",
scope: $scope,
headerText:"Ekathuwa modal header",
bodyTemplateURL: 'modal-template-body.html',
footer:false
});
}
//Headerless modal
$scope.ekathuwaModalHeaderless = function () {
$ekathuwa.modal({
id: "ekathuwaBodyTempLId",
scope: $scope,
bodyTemplateURL: 'modal-template-body.html',
header:false
});
}
//Header/Footer stylish from css class modal
//Usefull for set your all modals header to same style
$scope.ekathuwaModalHeaderless = function () {
$ekathuwa.modal({
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) {
elem.modal('show');
});
}
| Option | Value | Description |
|---|---|---|
id
|
default: ekathuwaModalID
|
Set your modal ID.
Id avoid namespace collisions.Most important, when modal inside modal(nested modal) |
$ekathuwa.modal({id:"yourModalId"});
|
||
scope
|
default: $rootScope
|
Pass your scope. |
$ekathuwa.modal({scope:$scope});
|
||
controller
|
default: null
|
Pass your controller. |
$ekathuwa.modal({controller:"ekathuwaModalCtl"});
|
||
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. |
$ekathuwa.modal({backdrop:"static"});
|
||
keyboard
|
default: true
|
Closes the modal when escape key is pressed |
$ekathuwa.modal({keyboard:false});
|
||
contentStyle
|
default: null
|
Set modal style.If you set
width, modal not be responsive. Use "
;" for style seperation. |
$ekathuwa.modal({id:"yourModalId",contentStyle:"width:350px;heigth:400px;background-color:red;"});
|
||
contentCustomSize
|
default: null
|
Set modal percentage(%) width. Not need to mention "%", Only need value.
It overwrite contentStyle's width. |
$ekathuwa.modal({id:"yourModalId",contentStyle:"width:350px;heigth:400px;background-color:#1b78f7;",contentCustomSize:80});
|
||
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
|
$ekathuwa.modal({id:"yourModalId",contentStyle:"width:350px;heigth:400px;background-color:#1b78f7;",contentPreSize:'lg'});
|
||
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 });
|
||
footerSaveBtn
|
default: false
|
Show/Hide footer save button. |
$ekathuwa.modal({ id: "ekathuwaModalId", scope: $scope, footerSaveBtn: true });
|
||
Copyright 2013 Sarath Ambegoda. Released under the MIT License (MIT).