{"id":13839286,"url":"https://github.com/ocombe/ocModal","last_synced_at":"2025-07-11T03:31:53.068Z","repository":{"id":13564439,"uuid":"16256738","full_name":"ocombe/ocModal","owner":"ocombe","description":"An angularJS modal directive \u0026 service","archived":false,"fork":false,"pushed_at":"2016-06-04T14:54:41.000Z","size":104,"stargazers_count":65,"open_issues_count":6,"forks_count":16,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-06-13T03:05:07.283Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ocombe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-26T16:44:32.000Z","updated_at":"2025-03-27T01:01:27.000Z","dependencies_parsed_at":"2022-07-12T15:11:31.774Z","dependency_job_id":null,"html_url":"https://github.com/ocombe/ocModal","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/ocombe/ocModal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ocombe%2FocModal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ocombe%2FocModal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ocombe%2FocModal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ocombe%2FocModal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ocombe","download_url":"https://codeload.github.com/ocombe/ocModal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ocombe%2FocModal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261589908,"owners_count":23181434,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T17:00:17.850Z","updated_at":"2025-07-11T03:31:52.743Z","avatar_url":"https://github.com/ocombe.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"ocModal\n=======\n\nAn angularJS modal directive \u0026amp; service\n\n### Key features\n- Easy to use modal\n- Dependencies free (well except angular off course)\n- Load via the service or the directive\n- Style yourself or use the bootstrap's theme\n\n### [Demo on Plunker](http://embed.plnkr.co/8QBKgw779g6jT6lmhXS5/)\n\n### Usage\n- Download the lib (you can use `bower install ocModal`)\n- Put ocModal.js into you project\n- Add the css file to your project: if you don't have bootstrap 3, include dist/css/ocModal.full.min.css. If you already have bootstrap 3, use dist/css/ocModal.light.min.css\n- Add the module ```oc.modal``` to your application\n- Load on demand using the service or the directive :\n\n**Service**:\n```javascript\n$ocModal.open('partials/modal.html');\n```\nor\n```javascript\n$ocModal.open('\u003cdiv\u003eMy content\u003c/div\u003e');\n```\n\n**Directive**:\n```html\n\u003cdiv oc-modal-open=\"'partials/modal.html'\"\u003e\u003c/div\u003e\n```\nor\n```html\n\u003cdiv oc-modal-open=\"'\u003cdiv\u003eMy content\u003c/div\u003e'\"\u003e\u003c/div\u003e\n```\n\nSee the example in the 'example' folder to know how to integrate ocLazyLoad with your router.\n\n### Parameters\nYou can also pass parameters when you open a modal via the service or the directive. The previous examples are equivalent to :\n\n**Service**:\n```javascript\n$ocModal.open({\n\turl: 'partials/modal.html'\n});\n```\nor\n```javascript\n$ocModal.open({\n\ttemplate: '\u003cdiv\u003eMy content\u003c/div\u003e'\n});\n```\n\n**Directive**:\n```html\n\u003cdiv oc-modal-open=\"{url: 'partials/modal.html'}\"\u003e\u003c/div\u003e\n```\nor\n```html\n\u003cdiv oc-modal-open=\"{template: '\u003cdiv\u003eMy content\u003c/div\u003e'}\"\u003e\u003c/div\u003e\n```\n\nThe complete list of parameters is :\n- **id**: you can specify an id for your modal, it is usefull if you want to open more than one modal at the same time\n```javascript\n$ocModal.open({\n\tid: 'modal1',\n\turl: 'partials/modal.html'\n});\n```\nBy default the id is set to ```'_default'```.\n\n- **url**: a template url loaded via [ng-include](http://docs.angularjs.org/api/ng.directive:ngInclude), so you can use an ng-script template or the url of an external html file\n\n- **template**: if you prefer to write the template in line, you can use the ```template``` parameter instead of ```url```.\n\n- **controller**: you can pass a controller for the new content\n```javascript\n$ocModal.open({\n\turl: 'partials/modal.html',\n\tcontroller: 'MyController'\n});\n```\n\n- **cls**: You can specify one or more (space separated) classes to be added to the modal\n```javascript\n$ocModal.open({\n\turl: 'partials/modal.html',\n\tcls: 'my-class1 my-class2'\n});\n```\n\n- **onOpen**: you can add a callback that will be called when the modal is opened\n```javascript\n$ocModal.open({\n\turl: 'partials/modal.html',\n\tonOpen: function() {\n\t\tconsole.log('Just opened !');\n\t}\n});\n```\n\n- **onClose**: you can add a callback that will be called when the modal is closed\n```javascript\n$ocModal.open({\n\turl: 'partials/modal.html',\n\tonClose: function() {\n\t\tconsole.log('Just closed !');\n\t}\n});\n```\n\n- **init**: use this to populate the modal scope. If you use a controller you will also be able to access this via $init\n```javascript\n$ocModal.open({\n\ttemplate: '\u003cdiv\u003e{{param1}}\u003c/div\u003e',\n\tcontroller: 'MyController',\n\tinit: {\n\t\tparam1: 'test'\n\t}\n});\n```\n\nAnd in your controller :\n```javascript\nangular.module('app').controller('MyController', ['$scope', '$init', function($scope, $init) {\n\tconsole.log($scope.param1, $init.param1);\n}]);\n```\n\n- **$ocModalParams**: Access the modal params in your controller\n```javascript\nangular.module('app').controller('MyController', ['$scope', '$ocModalParams', function($scope, $ocModalParams) {\n\tconsole.log($ocModalParams);\n}]);\n```\n\n- **isolate**: by default your modal's scope will inherit the variables from the init parameter. If you don't want that and you prefer to access these variables via the $init in your controller, you can use ```isolate=true```\n```javascript\n$ocModal.open({\n\turl: 'partials/modal.html',\n\tcontroller: 'MyController',\n\tisolate: true,\n\tinit: {\n\t\tparam1: 'test'\n\t}\n});\n```\n\nAnd use $init in your controller :\n```javascript\nangular.module('app').controller('MyController', ['$scope', '$init', function($scope, $init) {\n\tconsole.log($init.param1);\n}]);\n```\n\nBut ```$scope.param1``` will be ```undefined```.\n\n- **closeOnEsc**: by default you will be able to close the modal with the \"ESC\" key. If you want to disable this behaviour, use ```closeOnEsc: false```\n```javascript\n$ocModal.open({\n\turl: 'partials/modal.html',\n\tcloseOnEsc: false\n});\n```\n\n### Functions \u0026 attributes\n- **open(**__url/template/object__**)**: use this to open the modal\n```javascript\n$ocModal.open({\n\turl: 'partials/modal.html'\n});\n```\n\n- **close(**__[id][, param1][, param2][, ...]__**)**: use this to close the modal, it will return a promise that resolves at the end of the closing animation (if any)\n```javascript\n$ocModal.close();\n```\n\nWith no parameter it will close the last opened modal. If you want to close a specific modal, use the id.\n```javascript\n$ocModal.close('modal1');\n```\n\nYou can also pass what you want to the onClose callback (if you have one) :\n```javascript\n$ocModal.open({\n\turl: 'partials/modal.html',\n\tonClose: function(a, b, c) {\n\t\tconsole.log(a); // arg1\n\t\tb(); // whatever\n\t\tconsole.log(c); // {p1: 'test'}\n\t}\n});\n\n$ocModal.close('arg1', function() { console.log('whatever') }, {p1: 'test'});\n```\n\n- **$scope.closeModal(**__[id][, param1][, param2][, ...]__**)**: this is an alias for ```$ocModal.close()``` that you can also use in your template\n```html\n\u003cbutton ng-click=\"closeModal()\"\u003e\u003c/button\u003e\n```\n\n- **getOpenedModals()**: if you need to get the ids of the opened modals\n\n- **waitingForOpen**: check this property if you need to know if another modal will be opened once this one is closed\n```javascript\n$ocModal.open({\n\turl: \"partials/login.html\",\n\tcontroller: 'LoginCtrl',\n\tonClose: function() {\n\t\tif(!$ocModal.waitingForOpen) {\n\t\t\t$state.transitionTo('welcome');\n\t\t}\n\t}\n});\n```\n\n### Directives\n- **oc-modal-open**: this is an alias for ```$ocModal.open()``` that you can also use in your template.\n```html\n\u003cdiv oc-modal-open=\"{url: 'partials/modal.html'}\"\u003e\u003c/div\u003e\n```\n\n- **oc-modal-close**: this is an alias for ```$ocModal.close()``` that you can also use in your template.\n```html\n\u003cbutton oc-modal-close=\"'Some text '+testVar\"\u003e\u003c/button\u003e\n```\n\n### Animations\nYou can use a set of animations by including the file ocModal.animations.css and by adding one of those classes with the cls parameter :\n- fade-in\n- slide-down\n- scale\n- fall\n- flip-horizontal\n- flip-vertical\n- super-scaled\n- slit\n\n```javascript\noc-modal-open=\"{url: 'partials/modal.html', cls: 'fade-in'}\"\n```\n\nYou can add your own animations by adding new styles to `.modal .modal-dialog .modal-content` and `.modal .modal-dialog .modal-content.opened`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Focombe%2FocModal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Focombe%2FocModal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Focombe%2FocModal/lists"}