{"id":21006280,"url":"https://github.com/derlin/derlinmodals","last_synced_at":"2026-04-13T02:34:48.231Z","repository":{"id":151664045,"uuid":"53212127","full_name":"derlin/DerlinModals","owner":"derlin","description":"The only AngularJS  1.X Modal Service compatible with both Bootstrap and(!!) MDL","archived":false,"fork":false,"pushed_at":"2016-03-06T07:45:52.000Z","size":20,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-20T10:31:10.231Z","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/derlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-05T16:54:40.000Z","updated_at":"2024-06-22T02:46:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"f051d79e-d7a6-4958-8fda-88ca2646b3fe","html_url":"https://github.com/derlin/DerlinModals","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derlin%2FDerlinModals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derlin%2FDerlinModals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derlin%2FDerlinModals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derlin%2FDerlinModals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/derlin","download_url":"https://codeload.github.com/derlin/DerlinModals/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243428421,"owners_count":20289315,"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-11-19T08:50:29.530Z","updated_at":"2025-12-29T03:02:50.021Z","avatar_url":"https://github.com/derlin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DerlinModals - the only AngularJS  Modal Service compatible with both Bootstrap _AND_ MDL\n\nThis modal service is light, easy-to-use and highly customizable. It works with AngularJS 1.X, bootstrap 3 and Material Design Light.\n\n## Quick start\n\n0. Use your favorite framework: bootstrap or MDL (for other frameworks, see the `templateUrl` option).\n1. Download the file `derlin.modals.js` and include it in your html. If you use MDL, don't forget to also include `derlin.modals.css`.\n2. register `derlin.modals` as a dependancy to your angular module.\n3. inject `ModalService` in your controller.\n4. use the function `ModalService.showModal` with the options that suit your needs.\n\nHere is a simple YES/NO dialog:\n\n```javascript\n(function(){\n   angular.module( 'myApp', ['derlin.modals'] ) // 1.\n       .controller( 'MainCtrl', MainCtrl );     // 2.\n\n    // --------------------------\n\n   function MainCtrl( ModalService ){          // 3.   \n      this.modal = function(){\n\t      ModalService.showModal( {            // 4\n                bootstrap : true/false,\n                title     : \"Confirm\",\n                text      : \"Are you sure ?\",\n                cancelable: true,\n                positive  : \"yes\",\n                negative  : \"never mind\"\n            } ).then( function( result ){\n                console.log( \"Modal closed. Answer is \", result.status );\n            });\n      }\n   }\n  \n}());\n```\n\nhere is the html (without the header):\n\n```html\n\u003cbody ng-app=\"myApp\" ng-controller=\"MainCtrl as ctrl\"\u003e\n\n\u003c!-- bootstrap --\u003e\n\u003cbutton type=\"button\" ng-click=\"ctrl.modal()\" class=\"btn btn-default\"\u003e\n\tshow modal\n\u003c/button\u003e\n\n\u003c!-- mdl --\u003e\n\u003cbutton ng-click=\"ctrl.modal()\" \n     class=\"mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect\"\u003e\n     show modal\n\u003c/button\u003e\n\n\u003c/body\u003e\n```\n\nCheck the result with this jsfiddle : https://jsfiddle.net/Shitsu/vsh2vs4x/.\n\n## Functionalities\n\nThe framework allows you to create modals for bootstrap and/or MDL. You can:\n - customize the content: text or html (`text/template` options),\n - use AngularJS bindings inside the html content without excplicitely creating a controller,\n -  show/hide the positive and negative buttons, with custom label (`positive/negative` options),\n - allow the user to close the dialog by clicking outside the dialog or pressing ESC (`cancelable` option),\n - close the dialog from code-behind (`ModalService.close()`),\n - get the result from a promise,\n - and so much more.\n\nIf you don't want to use one of the two frameworks or need a highly customized dialog, no worries. You can also pass your own template (`templateUrl` option) to the service. \n\n\n## Options\n\n - `bootstrap`: `true` for using bootstrap, `false` for MDL;\n - `title` : the modal title\n - `text`: the text, which will be wrapped in `\u003cp\u003e\u003c/p\u003e`. You can customize its display with the css selector `.derlinContent`.\n - `html`: same as `text`, but allows HTML tags and AngularJS bindings. All the attributes defined in `inputs` is available inside the `html`. Example: \n  `\u003cstrong\u003eFry\u003c/strong\u003e lives in {{ inputs.city }}`. \n - `inputs` : an object whose attributes and/or function which will be injected into the angular scope of the modal. You can refer to it in your html content with `inputs.XX`. The `inputs` properties can be modified (using `\u003cinput ng-model=\"inputs.city\"\u003e` in the `html` option for example). The promise will also include the `inputs` in the callback.\n - `positive`: text of the positive button. If not defined or left blank, the positive button won't show up. Clicking the positive button will close the dialog and return a `status: true`.\n - `negative`: same as `positive`, but will return a `status: false`.\n - `cancelable`: if set to `true`, the dialog can be closed with the ESCAPE key or by clicking outside the dialog. \n\n## Result\n\nThe `showModal` function returns a promise. The promise is `resolved` when the dialog is closed and returns an object with the boolean property `status` set to `true` if the positive button was pressed, and the `inputs` object passed to the `showModal` on creation.\n\nThe promise can be `rejected` if the modal cannot be compiled and/or a problem occurs. \n\nSo, you basically always use:\n\n```javascript\nModalService.showModal({\n\t// options\n}).then(function(result){\n\t// called upon dialog close. \n\t// result.status: true if the positive button was clicked\n\t// result.inputs: the inputs passed in the options, if any\n}, function(){\n\t// do something in case the modal creation failed.\n});\n```\n\n## Custom templates\n\nMaybe the options offered don't suit your needs. You may want a really custom dialog content and/or you do not want to use a framework.\n\nIn this case, you can leave the options `text,html,positive,negative` and use the `templateUrl` option instead.\n\n__`templateUrl`__ is the id of a template with the full modal structure.  You can still use the `inputs` option.\n\nFor the template to work, here are some constraints:\n\n -  the template is defined in your html inside a `script` tag, like below. The `templateUrl` option will here be `someId.html`.\n```html\n\u003cscript type=\"ng-template\" id=\"someId.html\"\u003e\n\u003c/script\u003e\n```\n\n - If you want your modal to be cancelable, your template must begin with two `div`s, like this:\n```html\n   \u003cdiv\u003e\n      \u003cdiv\u003e\n          // content\n      \u003c/div\u003e\n   \u003c/div\u003e\n```\n - to close the modal, use the function `close(true/false)` which is available to the modal scope. The boolean parameter will be passed to the promise callback (see `result.status`).\n - if you do not use any framework, don't define the `bootstrap` option, or set it to `false`.\n - in case you don't use a framework, it is up to you to make the template appears like a modal (see the example for more info).\n - if you want to use a custom MDL dialog, you can use the class `derlinModal mdl` to wrap your template and the `button-bar` class for the buttons on the bottom. Or else, you can handle the display yourself.\n\n## Some examples\n\nA lot of examples are available in the `example` folder. A JSFiddle is also available here: TODO.\n\n##### simple cancelable text\n\n```javascript\nModalService.showModal( {\n    bootstrap : true, // or false\n    title     : \"What is lorem ipsum?\",\n    text      : \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\",\n    cancelable: true\n} );\n```\n\n##### dialog with MDL-styled input\n\n```javascript\nModalService.showModal( {\n    bootstrap : false,\n    title     : \"Fry City\",\n    html      : '\u003cdiv ng-class=\"{\\'is-dirty\\': inputs.city}\" class=\"mdl-textfield mdl-js-textfield mdl-textfield--floating-label\"\u003e' +\n    '\u003cinput class=\"mdl-textfield__input\" type=\"text\" id=\"sample\" ng-model=\"inputs.city\"\u003e' +\n    '\u003clabel class=\"mdl-textfield__label\" for=\"sample\"\u003eFry lives in\u003c/label\u003e' +\n    '\u003c/div\u003e',\n    positive  : 'ok',\n    negative  : 'cancel',\n    cancelable: true,\n    inputs    : myInputs\n} ).then( function( result ){\n    // result.inputs.city == result.myInputs.city\n    console.log( \"raw results: \", result,\n        \"\\nstatus: \", status,\n        \"\\ninputs: \", result.inputs );\n} );   \n```\n\n##### custom template skeletons\n\nWith _bootstrap__ :\n\n```html\n\u003c!--custom BOOTSTRAP template --\u003e\n\u003cscript type=\"text/ng-template\" id=\"bootstrapDialogTemplate.html\"\u003e\n    \u003cdiv class=\"modal fade\"\u003e\n        \u003cdiv class=\"modal-dialog\"\u003e\n            \u003cdiv class=\"modal-content\"\u003e\n                \u003cdiv class=\"modal-header\"\u003e\n                    \u003cbutton type=\"button\" class=\"close\" ng-click=\"close(false)\" data-dismiss=\"modal\"\n                            aria-hidden=\"true\"\u003e\u0026times;\u003c/button\u003e\n                    \u003ch4 class=\"modal-title\"\u003e\n                    // ...\n                    \u003c/h4\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"modal-body\"\u003e\n                    // ...\n                \u003c/div\u003e\n                \u003cdiv class=\"modal-footer\"\u003e\n                    \u003cbutton type=\"button\" ng-click=\"close(false)\" class=\"btn btn-default\" data-dismiss=\"modal\"\u003eclose\u003c/button\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/script\u003e\n```\nFor MDL:\n\n```html\n\u003c!--custom MDL template --\u003e\n\u003cscript type=\"text/ng-template\" id=\"mdlDialogTemplate.html\"\u003e\n    \u003cdiv class=\"derlinModal mdl\"\u003e\n        \u003cdiv class=\"mdl-card mdl-shadow--16dp\"\u003e\n            \u003cdiv\u003e\n                \u003ch2\u003e\n                // ... title\n                \u003c/h2\u003e\n               // ... content               \n            \u003c/div\u003e\n            \u003cdiv class=\"mdl-card__actions button-bar\"\u003e\n                \u003cbutton ng-click=\"close(false)\" class=\"mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect\"\u003eclose\u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/script\u003e\n```\n##### custom template without any framework\n\nThe template, defined in the html:\n\n```html\n\u003c!-- custom no framework template --\u003e\n\u003cscript type=\"text/ng-template\" id=\"myCustomModal.html\"\u003e\n    \u003cdiv id=\"pureHtmlCssDialog\"\u003e\n        \u003cdiv\u003e\n            \u003cdiv ng-click=\"close(false)\"\u003e\u003cspan class=\"my-close\"\u003eX\u003c/span\u003e\u003c/div\u003e\n            \u003ch4\u003eNo frameworks!\u003c/h4\u003e\n            \u003cdiv\u003econtent of \"more\" : {{ inputs.more }}\u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/script\u003e\n```\nThe controler call:\n\n```javascript\nModalService.showModal( {\n    bootstrap  : false,\n    templateUrl: \"myCustomModal.html\",\n    inputs     : {\n        more: \"akldjWEXCF.44\"\n    },\n    cancelable: true\n} ).then( modalClosed, modalError );\n```\n\nThe css:\n```css\n#pureHtmlCssDialog {\n    position: fixed;\n    font-family: Arial, Helvetica, sans-serif;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background: rgba(0, 0, 0, 0.8);\n    z-index: 99999;\n    opacity:1;\n    pointer-events: auto;\n}\n#pureHtmlCssDialog \u003e div {\n    width: 400px;\n    position: relative;\n    margin: 10% auto;\n    padding: 5px 20px 13px 20px;\n    border-radius: 10px;\n    background: #fff;\n    background: -moz-linear-gradient(#fff, #999);\n    background: -webkit-linear-gradient(#fff, #999);\n    background: -o-linear-gradient(#fff, #999);\n}\n#pureHtmlCssDialog .my-close {\n    background: #606061;\n    color: #FFFFFF;\n    line-height: 25px;\n    position: absolute;\n    right: -12px;\n    text-align: center;\n    top: -10px;\n    width: 24px;\n    text-decoration: none;\n    font-weight: bold;\n    -webkit-border-radius: 12px;\n    -moz-border-radius: 12px;\n    border-radius: 12px;\n    -moz-box-shadow: 1px 1px 3px #000;\n    -webkit-box-shadow: 1px 1px 3px #000;\n    box-shadow: 1px 1px 3px #000;\n}\n\n#pureHtmlCssDialog .my-close:hover {\n    background: #00d9ff;\n}\n```\n\n## TODO\n\n - also support pure CSS 3 modals (no framework) with regular options,\n\n## Inspirations and other projects\n\nThis module would not have been possible with the previous work of :\n\n - [angular-modal-service](https://github.com/dwmkerr/angular-modal-service): a great angularJS module,\n - [mdl-jquery-modal-dialog](https://github.com/oRRs/mdl-jquery-modal-dialog): dialog support for mdl.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderlin%2Fderlinmodals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fderlin%2Fderlinmodals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderlin%2Fderlinmodals/lists"}