{"id":20617069,"url":"https://github.com/kjantzer/backbone-modal","last_synced_at":"2025-04-15T08:56:54.868Z","repository":{"id":10797391,"uuid":"13068771","full_name":"kjantzer/backbone-modal","owner":"kjantzer","description":"Create clean modal windows with sleek transitions and a simple API.","archived":false,"fork":false,"pushed_at":"2018-08-02T19:04:33.000Z","size":1013,"stargazers_count":13,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T08:56:49.098Z","etag":null,"topics":["backbonejs","dialog-boxes","javascript","modal","prompt"],"latest_commit_sha":null,"homepage":"http://kjantzer.github.io/backbone-modal/","language":"CSS","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/kjantzer.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}},"created_at":"2013-09-24T15:32:44.000Z","updated_at":"2024-07-22T04:18:47.000Z","dependencies_parsed_at":"2022-09-22T23:01:29.002Z","dependency_job_id":null,"html_url":"https://github.com/kjantzer/backbone-modal","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/kjantzer%2Fbackbone-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kjantzer%2Fbackbone-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kjantzer%2Fbackbone-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kjantzer%2Fbackbone-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kjantzer","download_url":"https://codeload.github.com/kjantzer/backbone-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249040047,"owners_count":21202813,"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":["backbonejs","dialog-boxes","javascript","modal","prompt"],"created_at":"2024-11-16T11:22:02.753Z","updated_at":"2025-04-15T08:56:54.851Z","avatar_url":"https://github.com/kjantzer.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Backbone Modal\n\n![Version 1.1.0](https://img.shields.io/badge/Version-1.1.0-blue.svg)\n\n\u003e Create clean modal windows with sleek transitions and a simple API.\n\n![screenshot](https://i.imgur.com/qsbn21c.gif)\n\n### [Demo \u0026 Documentation](https://github.com/kjantzer/backbone-modal)\n\nNative alert views are ugly and very limiting; this plugin was designed to replace native alert() and provide additional features commonly needed in apps.\n\nIt has been developed with a simple and extensible API to make using modals easy.\n\n\u003e Modal defaults to using cutting-edge css3 [flexbox](http://caniuse.com/#feat=flexbox) for the layout. This can be turned off if you wish to support older browsers. Flexbox ensures the text is nice and sharp.\n\n***\n\n## General Use\n\n```js\nvar myModal = new Modal({\n    title: '',\n    msg: '',\n    btns: ['ok'],\n    theme: 'ios7',\n    w: null,\n    effect: 1,\n})\n```\n\n## Modal Presets\n\nThere are several baked in modal types for common actions. [Check out the demo](http://kjantzer.github.io/backbone-modal/)\n\n### Alert\n\n```js\nModal.alert('Title', 'Message')\n```\n\n### Warn\n\n```js\nModal.warn('Heads up', 'You can‘t do that')\n```\n\n![screenshot](https://i.imgur.com/WR08tw8.png)\n\n### Error\n\n```js\nModal.error('Sorry', 'You are not allowed to perform that action')\n```\n\n![screenshot](https://i.imgur.com/a3B8LPD.png)\n\n### Confirm\n\n```js\nModal.confirm('Confirm', 'Are you sure?', confirmed=\u003e{})\n```\n\n### Confirm Delete\n\nSimilar to confirm above but will have a red button with a trash icon\n\n```js\nModal.confirmDelete('Delete?', 'Are you sure?', confirmed=\u003e{})\n```\n\n### Prompt\n\n```js\nModal.prompt('Title', 'Message', {\n    placeholder: 'Enter value',\n    val: 'Prefilled value'\n}, val=\u003e{\n    console.log('you entered: ', val)\n})\n```\n\nPrompt has some more options available\n\n```js\n{\n    okBtn: 'Ok',\n    password: false,\n    placeholder: 'Enter value...',\n    val: '',\n    prefix: '',\n    suffix: '',\n    msgAfter: '',\n    pattern: null, // a regex\n    h: null, // add height for textarea\n    w: null,\n    autoFocus: true\n}\n```\n\n### Image\n\n```js\nModal.img('http://i.imgur.com/lu2sHfr.png')\n```\n\n### Spinner\n\n```js\nModal.spinner()\nModal.spinner('With a message')\nModal.spinner(false) // closes spinner\n```\n\n### Progress\n\nAll modals have a `progress` method for displaying a progress bar. Here's an example\n\n```js\nlet md = Modal.progress('Uploading', '');\n\n// later...\nmd.progress(10) // 10%\nmd.progress(23) // 23%\nmd.progress(84) // 84%\n\nmd.close();\n```\n\n## Custom Backbone View\n\nModal also supports rendering a custom backbone view for the content.\n\n```js\nvar MyView = Backbone.View.extend({\n    className: 'padded', // optional\n    render: function(){\n        this.$el.html('\u003cp\u003eMy modal content here\u003c/p\u003e')\n        return this\n    },\n    \n    btnAction: function(){\n        console.log('take action on the view')\n        \n        // your view will have a reference to the modal (only while the modal is open)\n        this.modal\u0026\u0026this.modal.close() // close modal if exists\n    }\n})\n\nvar myView = new MyView();\n\nnew Modal({\n    view: myView,\n    btns: [\n        'cancel',\n        {label: 'View Action', onClick: 'btnAction'}\n    ]\n})\n```\n\n## Options\n\n```js\n{\n    effect: 1, // open/close animation effect\n    title: '',\n    msg: '',\n    headerImg: '',\n    icon: '',\n    btns: ['close'],\n    theme: 'ios7',\n    w: null,\n    onOpen: null,\n    onOpened: null,\n    onClose: null,\n    onClosed: null,\n}\n```\n\n### `btns` - an array of buttons for the modal\n\nIn addition to defining your own buttons, there are a few presets that can be used by string name: `close`, `cancel`, `dismiss`, `ok`, `done`.\n\n```js\nbtns: [\n    'close',\n    {\n        label: 'Custom button',\n        className: 'blue md-close',\n        onClick: function(){\n            console.log('custom button clicked')\n        }\n    }\n]\n```\n\n\u003e**Note:** the `md-close` class will make that button close the modal in addition to calling the `onClick` method\n\n### `icon` - adds an animated icon to the top of the modal\n\nExpects [basic buttons](https://github.com/kjantzer/basic-buttons) to be installed or a similar CSS icon font installed prefixed with `icon-`; ex: `icon-trash`.\n\n```js\nnew Modal({title: 'Modal Title', icon: 'ok'})\nnew Modal({title: 'Modal Title', icon: 'trash'})\nnew Modal({title: 'Modal Title', icon: 'pencil'})\n```\n\n![screenshot](https://i.imgur.com/8oXxnYN.jpg)\n\n### `headerImg` - creates an image header above your title.\n\n```js\nnew Modal({\n    title: 'Title',\n    msg: 'The modal content message',\n    headerImg: 'https://images.unsplash.com/photo-1469536526925-9b5547cd5d68?auto=format\u0026fit=crop\u0026w=2852\u0026q=80',\n    w: 400\n})\n```\n\n![screenshot](https://i.imgur.com/100YR2L.png)\n\n## Changelog\n\n#### v1.0.0\n- better handling of custom backbone views as content\n- btns `onClick` can be a string of method name on the custom backbone.view\n- new `warn` and `error` styling\n- new `headerImg` option\n- new `icon` option\n\n## License\n\nMIT © [Kevin Jantzer](https://twitter.com/kjantzer) – Blackstone Publishing\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkjantzer%2Fbackbone-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkjantzer%2Fbackbone-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkjantzer%2Fbackbone-modal/lists"}