{"id":21911812,"url":"https://github.com/amiteshhh/angular-uib-popup","last_synced_at":"2026-05-19T19:33:10.099Z","repository":{"id":122150473,"uuid":"95434800","full_name":"amiteshhh/angular-uib-popup","owner":"amiteshhh","description":"Spinner \u0026 Custom alert/confirm using angularJS and ui-bootstrap","archived":false,"fork":false,"pushed_at":"2017-10-20T10:03:55.000Z","size":12,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T08:30:31.596Z","etag":null,"topics":["alert","angular","confirm","custom","dialog","loader","popup","spinner","ui-bootstrap"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amiteshhh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2017-06-26T10:17:39.000Z","updated_at":"2017-10-20T10:03:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"b72c6a13-4342-448b-b6fb-2f69b0e3d786","html_url":"https://github.com/amiteshhh/angular-uib-popup","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/amiteshhh/angular-uib-popup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amiteshhh%2Fangular-uib-popup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amiteshhh%2Fangular-uib-popup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amiteshhh%2Fangular-uib-popup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amiteshhh%2Fangular-uib-popup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amiteshhh","download_url":"https://codeload.github.com/amiteshhh/angular-uib-popup/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amiteshhh%2Fangular-uib-popup/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33229365,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-19T15:49:41.270Z","status":"ssl_error","status_checked_at":"2026-05-19T15:49:22.917Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["alert","angular","confirm","custom","dialog","loader","popup","spinner","ui-bootstrap"],"created_at":"2024-11-28T18:07:42.967Z","updated_at":"2026-05-19T19:33:10.069Z","avatar_url":"https://github.com/amiteshhh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Bootstrap Popup \u0026 Spinner\n\n\nA simple and elegant angular service inspired by [ionic popup](http://ionicframework.com/docs/v1/api/service/$ionicPopup) to show loader/spinner and popup(or dialogue) window for `alert` and `confirm` with custom content and look.\n\n## Dialoge Box\nPopupSvc exposes two methods `alert` and `confirm` which takes one parameter either string/html template or an [option](#advance-usage) object for customized look and feel.\nThese methods returns [promise](https://docs.angularjs.org/api/ng/service/$q) which is resolved when the popup is dismissed. It also returns `close` method to programmatically close it.\n\n## Spinner\n\nUse below methods to display a loader or spinner as overlay driven by Bootstrap modal window\n\n    1. spin : Show a spinner/loader\n    2. stopSpin: Stop the spinner\n\n\n## Dependency\n\n[Angular](https://code.angularjs.org/1.5.3/docs/api) (tested on v1.5.3)\n\n[Angular UI Bootstrap](http://angular-ui.github.io/bootstrap/versioned-docs/1.3.3/) (tested on v1.3.3)\n\n\u003e PopupSvc should work fine with any Angular/UI Bootstrap version supporting [ControllerAs](https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/) syntax.\n\n## Demo\n\nCheck out the demo at [Plunker](https://embed.plnkr.co/RX0pIj/)\n\n\n## Dialoge Usage \n\n```javascript\nangular.module('myApp', ['popup']);//add popup module dependency\nangular.controller('myCtrl', ['PopupSvc', function(PopupSvc){//Inject the PopupSvc service into your controller\n\n    //1. Basic Usage\n    PopupSvc.alert(\"\u003cstrong\u003eHey!\u003c/strong\u003e How you doing\");//html string\n    PopupSvc.confirm(\"Are you sure?\");//normal text\n\n    //2. Reacting on popup dismissal/button click\n    var popup = PopupSvc.alert(\"Hey! How you doing\");\n    popup.then(function(){\n        console.log('Alert dismissed');\n    });\n\n    PopupSvc.confirm(\"Hey! How you doing\").then(function(response){\n        if(response){\n            console.log('Primary/OK button clicked');\n        }else{\n            console.log('Secondary/Cancel button clicked');\n        }    \n    });\n\n    //Programmatically closing the popup using `close` method\n    //close method must be executed in next tick as popup creation is asynchronous\n    var popup = PopupSvc.alert(\"Hey! How you doing\");\n    window.setTimeout(popup.close, 3000);\n\n    //3. Customized popup\n    var popupOption = {//only fewer options here\n        title: 'Confirm',\n        subTitle: '\u003cspan style=\"color: red;\"\u003eAre you sure?\u003c/span\u003e',\n        body: 'Operation can not be reverted',\n        okText: 'Delete',\n        okClass: 'btn-danger',\n        size: 'md'//show a medium size modal popup\n    };\n    PopupSvc.confirm(popupOption);\n}]);\n\n```\n## Spinner Usage \n\n```javascript\nPopupSvc.spin();//spinner without leading text\nPopupSvc.spin('Saving...');//spinner with leading text\nPopupSvc.stopSpin();//stop and remove the last spinner\n\n//Advance usage to stop the required spinner in case of multiple spinner showing at a time\nvar modal = PopupSvc.spin();//will create the spinner and return modal reference to stop it\nmodal.close();//stop or close the spinner\n```\n\n\n## Install\n\nDownload the script file directly from Github.\n\nhttps://raw.githubusercontent.com/amiteshhh/angular-uib-popup/master/popup.service.min.js\n\nAdd `script` reference to your html then add `popup` module as angular module dependency. Now you can use `PopupSvc` service.\n\n\n## Advance Usage\n\nTo have a custom look and feel (e.g button texts etc.) use below option as a parameter to `alert` or `confirm`. All of the option properties are optional. Of course you will provide value for `body` or `title` to render some text.\n\n\n\u003e popup is created using bootstrap $uibModal hence there are few properties related to that as well\n\n```javascript\n{\n    title: '', // String. The title of the popup.\n    subTitle: '', // String. The sub-title of the popup. only applicable when title provided\n    body: '',//String to place in the popup body.\n\n    okText: 'OK',//text for OK button\n    okClass: 'btn-info',//class(es) to be added to OK button; e.g 'btn-info btn-small'\n    cancelText: 'Cancel',//not applicable for alert\n    cancelClass: 'btn-secondary',\n    \n    headerClass: 'text-center',//class to be added to bootstrap modal-header\n    bodyClass: '',//class for bootstrap modal-body\n    footerClass: '',//class for bootstrap modal-footer\n\n    //Below are the three uibModal related properties, see uibModal Bootstrap documentation for details\n\n    backdrop: 'static',//Controls presence of a backdrop. Allowed values: true (default), false (no backdrop), 'static' (disables modal closing by click on the backdrop).\n\n    keyboard: false,//Indicates whether the dialog should be closable by hitting the ESC key.\n    size: 'sm',//modal or popup size, default is small\n\n    /*NOTE: Below are the app level configuration applicable when input parameter is string. It can be set during angular config phase.\n    */\n\n    showStringAs: 'body',//it will display the text as modal body(left aligned smaller font text). Other value is 'title' (center aligned h5 element)\n    enableDynamicSize: true,//show medium size popup when input string extends the below character limit\n    extendSizeCharLength: 300\n};\n\n```\n\n\u003e Sice all applicable string inputs can contains `html` tags therefore you can easily control the style.\n\n\n## Default Configuration\n\nYou can easily configure the default popup option for the application during config phase using `PopupSvcProvider` as below.\n\n\n```javascript\nangular.module('myApp', ['popup'])\n    .config(['PopupSvcProvider', function(PopupSvcProvider){\n         PopupSvcProvider.setDefaults({\n            okText: 'Dismiss',//Now instead of 'OK' popup will show button with text 'Dismiss' \n            okClass: 'btn-primary',\n            cancelText: 'Close',\n            keyboard: true//popup can be closed now with ESC key.\n        });\n    }]);\n```\nHowever the option parameter will still take precedence over app level configuration.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famiteshhh%2Fangular-uib-popup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famiteshhh%2Fangular-uib-popup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famiteshhh%2Fangular-uib-popup/lists"}