{"id":13404144,"url":"https://github.com/stefangabos/Zebra_Dialog","last_synced_at":"2025-03-14T09:30:29.063Z","repository":{"id":7917938,"uuid":"9303197","full_name":"stefangabos/Zebra_Dialog","owner":"stefangabos","description":"A small, compact, mobile-friendly and highly configurable jQuery plugin for creating gorgeous dialog boxes","archived":false,"fork":false,"pushed_at":"2025-03-08T10:40:02.000Z","size":1977,"stargazers_count":157,"open_issues_count":1,"forks_count":66,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-11T05:05:47.101Z","etag":null,"topics":["alert","dialog-box","dialog-boxes","jquery","modal-dialogs","modal-windows","notifications"],"latest_commit_sha":null,"homepage":"http://stefangabos.github.io/Zebra_Dialog/flat.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stefangabos.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","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},"funding":{"github":"stefangabos","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2013-04-08T18:05:20.000Z","updated_at":"2025-03-08T10:40:06.000Z","dependencies_parsed_at":"2024-04-22T07:25:52.219Z","dependency_job_id":"51e4c741-676d-4b62-89cd-bda07d2092cf","html_url":"https://github.com/stefangabos/Zebra_Dialog","commit_stats":{"total_commits":501,"total_committers":6,"mean_commits":83.5,"dds":0.0359281437125748,"last_synced_commit":"1a62a05d61679c515e74028e474e85859a9ca5a9"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefangabos%2FZebra_Dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefangabos%2FZebra_Dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefangabos%2FZebra_Dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefangabos%2FZebra_Dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stefangabos","download_url":"https://codeload.github.com/stefangabos/Zebra_Dialog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243553830,"owners_count":20309815,"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":["alert","dialog-box","dialog-boxes","jquery","modal-dialogs","modal-windows","notifications"],"created_at":"2024-07-30T19:01:39.673Z","updated_at":"2025-03-14T09:30:28.740Z","avatar_url":"https://github.com/stefangabos.png","language":"JavaScript","funding_links":["https://github.com/sponsors/stefangabos","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=RKMCMRZB493LY"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/stefangabos/zebrajs/master/docs/images/logo.png\" alt=\"zebrajs\" align=\"right\"\u003e\n\n# Zebra Dialog \u0026nbsp;[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=A+small,+compact,+mobile-friendly+and+highly+configurable+jQuery+plugin+for+creating+responsive+modal+dialog+boxes\u0026url=https://github.com/stefangabos/Zebra_Dialog\u0026via=stefangabos\u0026hashtags=jquery,dialog,notifications,alert,modal,javascript)\n\n*A small, compact, mobile-friendly and highly configurable jQuery plugin for creating responsive modal dialog boxes*\n\n[![npm](https://img.shields.io/npm/v/zebra_dialog.svg)](https://www.npmjs.com/package/zebra_dialog) [![Total](https://img.shields.io/npm/dt/zebra_dialog.svg)](https://www.npmjs.com/package/zebra_dialog) [![Monthly](https://img.shields.io/npm/dm/zebra_dialog.svg)](https://www.npmjs.com/package/zebra_dialog) [![](https://data.jsdelivr.com/v1/package/npm/zebra_dialog/badge)](https://www.jsdelivr.com/package/npm/zebra_dialog) [![License](https://img.shields.io/npm/l/zebra_dialog.svg)](https://github.com/stefangabos/Zebra_Dialog/blob/master/LICENSE.md)\n\nA modal dialog box is a focused interface element that prompts users to take action before returning to the main application. These dialogs are commonly used to capture user attention, deliver important information, confirm actions, or highlight warnings and errors. By temporarily blocking interaction with the rest of the page, modal windows ensure that users address critical tasks or notifications before proceeding, making them a fundamental part of modern web applications.\n\n**Zebra Dialog** is a small (~12KB minified, 3KB gzipped), compact (one JavaScript file, no dependencies other than jQuery 1.7.0+), mobile-friendly and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace native JavaScript *alert*, *confirm* and *prompt* dialog boxes.\n\nCan also be used as a notification widget (when configured to show no buttons and to close automatically) for updates or errors, without distracting users from their browser experience by displaying obtrusive alerts.\n\n[![Screenshot](https://raw.github.com/stefangabos/Zebra_Dialog/master/examples/screenshot-flat.png)](https://stefangabos.github.io/Zebra_Dialog/flat.html)\n[![Screenshot](https://raw.github.com/stefangabos/Zebra_Dialog/master/examples/screenshot-materialize.png)](https://stefangabos.github.io/Zebra_Dialog/materialize.html)\n[![Screenshot](https://raw.github.com/stefangabos/Zebra_Dialog/master/examples/screenshot.png)](https://stefangabos.github.io/Zebra_Dialog/index.html)\n\n## Features\n\n - great looking dialog boxes, out of the box, with 3 beautiful themes included\n - 6 types of dialog boxes available: *confirmation*, *error*, *information*, *prompt*, *question* and *warning*\n - content can also be added through AJAX calls, iFrames or from inline elements (together with attached events)\n - easily customisable appearance by editing the CSS file\n - create modal or non-modal dialog boxes\n - easily add custom buttons\n - position the dialog box wherever you want - not just in the middle of the screen\n - dialog boxes are draggable\n - callback functions can be used for further customisations\n - use callback functions to handle users' choice\n-  works on mobile devices\n - works in pretty much any browser (Chrome, Firefox, Safari, Edge, Opera, Internet Explorer 6+)\n\n For the [classic theme](https://stefangabos.github.io/Zebra_Dialog/index.html), the icons used for *confirmation*, *information*, *error* and *question* dialog boxes are made by [DryIcon](http://dryicons.com/free-icons/preview/aesthetica/) while the *warning* icon is made by Function Design \u0026 Development Studio (website is not online anymore).\n\nFor the [flat theme](https://stefangabos.github.io/Zebra_Dialog/flat.html), the icons used are made by [Elegant Themes](http://www.elegantthemes.com/blog/freebie-of-the-week/beautiful-flat-icons-for-free)\n\nFor the [materialize theme](https://stefangabos.github.io/Zebra_Dialog/materialize.html) theme, the icons used are taken from [Google's Material Design](https://material.io/tools/icons/?style=baseline) *\"design language\"*.\n\n## 🎂 Support the development of this project\n\nYour support means a lot and it keeps me motivated to keep working on open source projects.\u003cbr\u003e\nIf you like this project please ⭐ it by clicking on the star button at the top of the page.\u003cbr\u003e\nIf you are feeling generous, you can buy me a coffee by donating through PayPal, or you can become a sponsor.\u003cbr\u003e\nEither way - **Thank you!** 🎉\n\n[\u003cimg src=\"https://img.shields.io/github/stars/stefangabos/zebra_dialog?color=green\u0026label=star%20it%20on%20GitHub\" width=\"132\" height=\"20\" alt=\"Star it on GitHub\"\u003e](https://github.com/stefangabos/Zebra_Dialog) [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=RKMCMRZB493LY) [\u003cimg src=\"https://img.shields.io/badge/-Sponsor-fafbfc?logo=GitHub%20Sponsors\"\u003e](https://github.com/sponsors/stefangabos)\n\n## Demo\n\nSee the [demos](https://stefangabos.github.io/Zebra_Dialog/flat.html)\n\n## Requirements\n\nZebra Dialog has no dependencies other than jQuery 1.7.0+\n\n## Installation\n\nZebra Dialog is available as a [npm package](https://www.npmjs.com/package/zebra_dialog). To install it use:\n\n```bash\n# the \"--save\" argument adds the plugin as a dependency in packages.json\nnpm install zebra_dialog --save\n```\n\n## How to use\n\nFirst, load jQuery from a CDN and provide a fallback to a local source like:\n\n```html\n\u003cscript src=\"https://code.jquery.com/jquery-3.7.1.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003ewindow.jQuery || document.write('\u003cscript src=\"path/to/jquery-3.7.1.js\"\u003e\u003c\\/script\u003e')\u003c/script\u003e\n```\n\nLoad the Zebra Dialog jQuery plugin:\n\n```html\n\u003cscript src=\"path/to/zebra_dialog.min.js\"\u003e\u003c/script\u003e\n```\n\nAlternatively, you can load Zebra Dialog from [JSDelivr CDN](https://www.jsdelivr.com/package/npm/zebra_dialog) like this:\n```html\n\u003c!-- for the most recent version, not recommended in production --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/zebra_dialog@latest/dist/zebra_dialog.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- for a specific version --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/zebra_dialog@3.0.6/dist/zebra_dialog.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- replacing \"min\" with \"src\" will serve you the non-compressed version --\u003e\n```\n\nLoad the style sheet file from a local source\n\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/theme/zebra_dialog.min.css\"\u003e\n```\n\n...or from [JSDelivr CDN](https://www.jsdelivr.com/)\n\n```html\n\u003c!-- for the most recent version of the \"flat\" theme --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/zebra_dialog@latest/dist/css/flat/zebra_dialog.min.css\"\u003e\n\n\u003c!-- for the most recent version of the \"default\" theme --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/zebra_dialog@latest/dist/css/default/zebra_dialog.min.css\"\u003e\n\n\u003c!-- replacing \"min\" with \"src\" will serve you the non-compressed version --\u003e\n```\n\nNow, within the DOM-ready event do\n\n```javascript\n$(document).ready(function() {\n\n    // show a dialog box when clicking on an element\n    $('#element').on('click', function(e) {\n        e.preventDefault();\n        new $.Zebra_Dialog('The link was clicked!');\n    });\n\n});\n```\n\n## Configuration options\n\n## Properties\n\n\u003ctable width\"100%\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth\u003eProperty\u003c/th\u003e\n        \u003cth\u003eType\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003eanimation_speed_hide\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003einteger\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e250\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            The speed, in milliseconds, by which the backdrop and the dialog box will be animated when closing.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003eanimation_speed_show\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003einteger\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e0\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            The speed, in milliseconds, by which the backdrop and the dialog box will be animated when appearing.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003eauto_close\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003efalse\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            The number of milliseconds after which to automatically close the dialog box or \u003ccode\u003efalse\u003c/code\u003e to not automatically close the dialog box.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003eauto_focus_button\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003etrue\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            The index (0-based) of the button (from left to right) to place the focus on when a dialog box is first shown.\u003cbr\u003e\u003cbr\u003e\n            Set to \u003ccode\u003efalse\u003c/code\u003e to disable.\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eWhen set to \u003ccode\u003efalse\u003c/code\u003e the focus will be placed on the dialog box's content so that when the users presses \u003ccode\u003eTAB\u003c/code\u003e, the focus will be set on the first button.\u003c/blockquote\u003e\n            Setting this to \u003ccode\u003etrue\u003c/code\u003e is equivalent to setting it to \u003ccode\u003e0\u003c/code\u003e.\u003cbr\u003e\u003cbr\u003e\n            Default is TRUE\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003ebackdrop_close\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003etrue\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Should the dialog box close when the backdrop is clicked?\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003ebackdrop_opacity\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003edouble\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e.9\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            The opacity of the backdrop (between \u003ccode\u003e0\u003c/code\u003e and \u003ccode\u003e1\u003c/code\u003e)\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003ebuttons\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Use this for localization and for adding custom buttons.\u003cbr\u003e\u003cbr\u003e\n            If set to \u003ccode\u003etrue\u003c/code\u003e, the default buttons will be used, depending on the type of the dialog box: \u003ccode\u003e['Ok', 'Cancel']\u003c/code\u003e for \u003ccode\u003eprompt\u003c/code\u003e, \u003ccode\u003equestion\u003c/code\u003e and \u003ccode\u003ewarning\u003c/code\u003e types, and \u003ccode\u003e['Ok']\u003c/code\u003e for the other types of dialog boxes.\u003cbr\u003e\u003cbr\u003e\n            For custom buttons, use an array containing the captions of the buttons to display: \u003ccode\u003e['My button 1', 'My button 2']\u003c/code\u003e.\u003cbr\u003e\u003cbr\u003e\n            Set to \u003ccode\u003efalse\u003c/code\u003e if you want no buttons.\u003cbr\u003e\u003cbr\u003e\n            You can also add custom CSS classes, set which button's callback to be triggered when the user presses ENTER while\n            inside the input box (for \u003ccode\u003eprompt\u003c/code\u003e dialog boxes and when \u003ccode\u003eprompt_rows\u003c/code\u003e is \u003ccode\u003e1\u003c/code\u003e), and/or attach callback functions to individual buttons by using\n            objects in the form of:\u003cbr\u003e\u003cbr\u003e\n            \u003ccode\u003e[{\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;caption: 'My button 1',\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;custom_class: 'foo',\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;default_confirmation: true,\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;callback: function() { // code }\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e},{\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;caption: 'My button 2',\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;custom_class: 'bar',\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;callback: function() { // code }\u003c/code\u003e\u003cbr\u003e\n\t\t\t\u003ccode\u003e}]\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n            For \u003ccode\u003eprompt\u003c/code\u003e dialog box types use the \u003ccode\u003edefault_confirmation\u003c/code\u003e property to tell the library\n            which button's callback to trigger when the user presses \u003ccode\u003eENTER\u003c/code\u003e while inside the input box. If\n            not set, you will \u003cstrong\u003ehave\u003c/strong\u003e to handle user input via the \u003ccode\u003eonBeforeClose\u003c/code\u003e event, or you will\n            not be able to process user input for this case.\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eThe above applies only if \u003ccode\u003eprompt_rows\u003c/code\u003e is \u003ccode\u003e1\u003c/code\u003e as otherwise the ENTER key inserts a line-break\u003c/blockquote\u003e\u003cbr\u003e\n            Callback functions receive as first argument the entire dialog box, as a jQuery object, and as second argument,\n            the value entered in the input box - when the dialog box's type is \u003ccode\u003eprompt\u003c/code\u003e, or \u003ccode\u003eundefined\u003c/code\u003e\n            for the other dialog types.\u003cbr\u003e\u003cbr\u003e\n            A callback function attache to a button is executed as soon as the button is clicked rather than \u003cstrong\u003eafter\n            \u003c/strong\u003e the dialog box is closed, as it is the case with the \u003ccode\u003eonClose\u003c/code\u003e event.\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eA callback function returning FALSE will prevent the dialog box from closing.\u003c/blockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003ecenter_buttons\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003efalse\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n        Setting this property to \u003ccode\u003etrue\u003c/code\u003e will instruct the plugin to center any available buttons instead of aligning them to the right\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003ecustom_class\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003efalse\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            An extra class to add to the dialog box's container and to the backdrop (when present).\u003cbr\u003e\u003cbr\u003e\n            For example, setting this value to \u003ccode\u003emycustom\u003c/code\u003e and in the CSS file having something like\u003cbr\u003e\u003cbr\u003e\n            \u003ccode\u003e.mycustom .ZebraDialog_Title { background: red }\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n            would set the dialog box title's background to red.\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eTake a look into a theme's style sheet file to see what can be changed.\u003c/blockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003edefault_value\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003estring\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\"\"\u003cbr\u003e(empty string)\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Default value to show in the input box when the dialog box type is \u003ccode\u003eprompt\u003c/code\u003e.\u003cbr\u003e\u003cbr\u003e\n            See also the \u003ccode\u003eplaceholder\u003c/code\u003e property.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003edisable_page_scrolling\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003etrue\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Prevents scrolling of the page behind the dialog box, when the dialog box is open.\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eThis has effect only when the \u003ccode\u003emodal\u003c/code\u003e property is set to \u003ccode\u003etrue\u003c/code\u003e.\u003c/blockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003edraggable\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003etrue for dialog boxes that have a title\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Whether the dialog box should be draggable or not.\u003cbr\u003e\u003cbr\u003e\n            Dialog boxes that have a title are draggable by default unless this property is set to \u003ccode\u003efalse\u003c/code\u003e.\u003cbr\u003e\u003cbr\u003e\n            For dialog boxes not having a title, set this property to \u003ccode\u003eforce\u003c/code\u003e for making them draggable.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003eheight\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e0\u003cbr\u003e(automatically set)\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n        By default, the height of the dialog box is automatically computed to fit the content (but not exceed viewport).\u003cbr\u003e\u003cbr\u003e\n        Can be specified as a numeric value (which will be interpreted as a value in pixels) or as a percentage (of the viewport).\u003cbr\u003e\u003cbr\u003e\n        \u003cblockquote\u003eIf \u003ccode\u003emax_height\u003c/code\u003e is set to valid value greater than \u003ccode\u003e0\u003c/code\u003e, then this property will be ignored!\u003c/blockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003ekeyboard\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003etrue\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n        When set to \u003ccode\u003etrue\u003c/code\u003e, pressing the \u003ccode\u003eESC\u003c/code\u003e key will close the dialog box.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003emargin\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e0\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n        Margin of the dialog box relative to the viewport's limits (a single value, applied both horizontally and/or vertically)\u003cbr\u003e\u003cbr\u003eThis is used when the dialog box is stretched 100% horizontally and/or vertically and \u003ccode\u003ewidth\u003c/code\u003e and \u003ccode\u003emax_width\u003c/code\u003e are not set (when stretched horizontally) and \u003ccode\u003eheight\u003c/code\u003e and \u003ccode\u003emax_height\u003c/code\u003e are not set (when stretched vertically).\u003cbr\u003e\u003cbr\u003e\n        This propery is also taken into account when using the \u003ccode\u003eposition\u003c/code\u003e property.\u003cbr\u003e\u003cbr\u003e\n        Can be specified as a numeric value (which will be interpreted as a value in pixels) or as a percentage (of the viewport).\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003emax_height\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e0\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            The maximum height of the dialog box.\u003cbr\u003e\u003cbr\u003e\n            Can be specified as a numeric value (which will be interpreted as a value in pixels) or as a percentage (of the viewport).\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eIf this property is set to valid value greater than \u003ccode\u003e0\u003c/code\u003e, then the \u003ccode\u003eheight\u003c/code\u003e property will be ignored.\u003c/blockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003emax_width\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e450\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            The maximum width of the dialog box.\u003cbr\u003e\u003cbr\u003e\n            Can be specified as a numeric value (which will be interpreted as a value in pixels) or as a percentage (of the viewport).\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eIf this property is set to valid value greater than \u003ccode\u003e0\u003c/code\u003e, then the \u003ccode\u003ewidth\u003c/code\u003e property will be ignored.\u003c/blockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003emessage\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003estring\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            The text (or HTML) to be displayed in the dialog box.\u003cbr\u003e\u003cbr\u003e\n            See the \u003ccode\u003esource\u003c/code\u003e property on how to add content via AJAX, iFrames or from inline elements.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003emodal\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003etrue\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            When set to \u003ccode\u003etrue\u003c/code\u003e there will be a semitransparent backdrop behind the dialog box, preventing users from clicking the page's content.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003eplaceholder\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003estring\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\"\"\u003cbr\u003e(empty string)\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            When set to \u003ccode\u003etrue\u003c/code\u003e there will be a semitransparent backdrop behind the dialog box, preventing users from clicking the page's content.\u003cbr\u003e\u003cbr\u003e\n            See also \u003ccode\u003edefault_value\u003c/code\u003e property.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003eposition\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e'center'\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Position of the dialog box.\u003cbr\u003e\u003cbr\u003e\n            Can be either \u003ccode\u003ecenter\u003c/code\u003e (which would center the dialog box both horizontally and vertically), or an array with 2 elements, in the form of\u003cbr\u003e\u003cbr\u003e\n\t\t\t\u003ccode\u003e// notice that everything is enclosed in quotes\u003c/code\u003e\u003cbr\u003e\n\t\t\t\u003ccode\u003e['horizontal_position +/- offset',\u003c/code\u003e\u003cbr\u003e\n\t\t\t\u003ccode\u003e'vertical_position +/- offset']\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n\t\t\twhere\u003cbr\u003e\n            \u003cul\u003e\n                \u003cli\u003e\u003cem\u003ehorizontal_position\u003c/em\u003e can be \u003ccode\u003eleft\u003c/code\u003e, \u003ccode\u003eright\u003c/code\u003e or \u003ccode\u003ecenter\u003c/code\u003e\u003c/li\u003e\n                \u003cli\u003e\u003cem\u003evertical_position\u003c/em\u003e can be \u003ccode\u003etop\u003c/code\u003e, \u003ccode\u003ebottom\u003c/code\u003e or \u003ccode\u003emiddle\u003c/code\u003e\u003c/li\u003e\n                \u003cli\u003e\u003cem\u003eoffset\u003c/em\u003e is optional and represents the value of pixels to add/subtract from the respective horizontal or vertical position\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cblockquote\u003ePositions are relative to the viewport (the area of the browser that is visible to the user) and\n            the value of the \u003ccode\u003emargin\u003c/code\u003e property is taken into account!\u003c/blockquote\u003e\n            Examples:\u003cbr\u003e\u003cbr\u003e\n            \u003ccode\u003e// position the dialog box in the top-left corner\u003c/code\u003e\u003cbr\u003e\n\t\t\t\u003ccode\u003e// shifted 20 pixels inside\u003c/code\u003e\u003cbr\u003e\n\t\t\t\u003ccode\u003e['left + 20', 'top + 20']\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n            \u003ccode\u003e// position the dialog box in the bottom-right corner\u003c/code\u003e\u003cbr\u003e\n\t\t\t\u003ccode\u003e// shifted 20 pixels inside\u003c/code\u003e\u003c/br\u003e\n\t\t\t\u003ccode\u003e['right - 20', 'bottom - 20']\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n            \u003ccode\u003e// position the dialog box in center-top\u003c/code\u003e\u003cbr\u003e\n\t\t\t\u003ccode\u003e// shifted 20 pixels down\u003c/code\u003e\u003cbr\u003e\n\t\t\t\u003ccode\u003e['center', 'top + 20']\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eNote that when the width of the viewport is less than 768 pixels, any arithmetics will be ignored (so, things like \u003ccode\u003eleft + 20\u003c/code\u003e will be interpreted as just \u003ccode\u003eleft\u003c/code\u003e)\u003c/blockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003eprompt_rows\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003einteger\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e1\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            If the dialog box type is \u003ccode\u003eprompt\u003c/code\u003e, setting this property to a value higher than \u003ccode\u003e1\u003c/code\u003e\n            will change the input box to a textarea input having the specified number of rows.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003ereposition_speed\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003einteger\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e500\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            The duration (in milliseconds) of the animation used to reposition the dialog box when the browser window is resized.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003eshow_close_button\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003etrue\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            When set to \u003ccode\u003etrue\u003c/code\u003e, a \u003cem\u003eclose\u003c/em\u003e button (the little \"x\") will be shown in the upper right corner of the dialog box.\u003cbr\u003e\u003cbr\u003e\n\t\t\tIf the dialog box has a title bar then the \u003cem\u003eclose\u003c/em\u003e button will be shown in the title bar, vertically centered and respecting the right padding.\u003cbr\u003e\u003cbr\u003e\n            If the dialog box does not have a title bar then the \u003cem\u003eclose\u003c/em\u003e button will be shown in the upper right corner of the body of the dialog box, respecting the position related properties set in the stylesheet.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003esource\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003efalse\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Add content via AJAX, iFrames or from inline elements (together with the already applied events).\u003cbr\u003e\u003cbr\u003e\n            This property can be any of the following:\u003cbr\u003e\u003cbr\u003e\n            \u003cul\u003e\n                \u003cli\u003e\n                    \u003ccode\u003eajax: object\u003c/code\u003e - where \u003cem\u003eobject\u003c/em\u003e can be an \u003ccode\u003eobject\u003c/code\u003e with any of the properties you'd normally use to make an AJAX call in jQuery (see the description for the \u003cem\u003esettings\u003c/em\u003e argument \u003ca href=\"http://api.jquery.com/jQuery.ajax/\"\u003ehere\u003c/a\u003e), or it can be a \u003ccode\u003estring\u003c/code\u003e representing a valid URL whose content to be fetched via AJAX and placed inside the dialog box.\u003cbr\u003e\u003cbr\u003e\n                    \u003ccode\u003esource: {ajax: 'http://myurl.com/'}\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n\t\t\t\t\t\u003ccode\u003esource: {\u003c/code\u003e\u003cbr\u003e\n\t\t\t\t\t\u003ccode\u003e\u0026nbsp;\u0026nbsp;ajax: {\u003c/code\u003e\u003cbr\u003e\n\t\t\t\t\t\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;url: 'http://myurl.com/',\u003c/code\u003e\u003cbr\u003e\n\t\t\t\t\t\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;cache: false\u003c/code\u003e\u003cbr\u003e\n\t\t\t\t\t\u003ccode\u003e\u0026nbsp;\u0026nbsp;}\u003c/code\u003e\u003cbr\u003e\n\t\t\t\t\t\u003ccode\u003e}\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n                    \u003cblockquote\u003eNote that you cannot use the \u003ccode\u003esuccess\u003c/code\u003e property as it will always be overwritten by the library; use the \u003ccode\u003ecomplete\u003c/code\u003e property instead, if you have to\u003c/blockquote\u003e\u003cbr\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                    \u003ccode\u003eiframe: object\u003c/code\u003e - where \u003cem\u003eobject\u003c/em\u003e can be an \u003ccode\u003eobject\u003c/code\u003e where property names are valid attributes of the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe\"\u003eiframe\u003c/a\u003e tag, or it can be a \u003ccode\u003estring\u003c/code\u003e representing a valid URL to be loaded inside an iFrame and placed inside the dialog box.\u003cbr\u003e\u003cbr\u003e\n\t\t\t\t\t\u003ccode\u003esource: {iframe: 'http://myurl.com/'}\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n\t\t\t\t\t\u003ccode\u003esource: {\u003c/code\u003e\u003cbr\u003e\n\t\t\t\t\t\u003ccode\u003e\u0026nbsp;\u0026nbsp;// iFrame's width and height are automatically set\u003c/code\u003e\u003cbr\u003e\n                    \u003ccode\u003e\u0026nbsp;\u0026nbsp;// to fit the dialog box's width and height\u003c/code\u003e\u003cbr\u003e\n\t\t\t\t\t\u003ccode\u003e\u0026nbsp;\u0026nbsp;iframe: {\u003c/code\u003e\u003cbr\u003e\n\t\t\t\t\t\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;src: 'http://myurl.com/'\u003c/code\u003e\u003cbr\u003e\n\t\t\t\t\t\u003ccode\u003e\u0026nbsp;\u0026nbsp;}\u003c/code\u003e\u003cbr\u003e\n\t\t\t\t\t\u003ccode\u003e}\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                    \u003ccode\u003einline: selector\u003c/code\u003e - where \u003cem\u003eelement\u003c/em\u003e is a jQuery element from the page; the element will be copied and placed inside the dialog box together with any attached events. If you just want the element's inner HTML, use \u003ccode\u003e$('#element').html()\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n                    \u003ccode\u003esource: {inline: $('#myelement')}\u003c/code\u003e\n                \u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003etitle\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003estring\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\"\"\u003cbr\u003e(empty string, no title)\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Title of the dialog box\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003etype\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003einformation\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Dialog box type.\u003cbr\u003e\n            Can be any of the following:\n            \u003cul\u003e\n                \u003cli\u003econfirmation\u003c/li\u003e\n                \u003cli\u003eerror\u003c/li\u003e\n                \u003cli\u003einformation\u003c/li\u003e\n                \u003cli\u003eprompt\u003c/li\u003e\n                \u003cli\u003equestion\u003c/li\u003e\n                \u003cli\u003ewarning\u003c/li\u003e\n            \u003c/ul\u003e\n            If you don't want an icon, set the \u003ccode\u003etype\u003c/code\u003e property to \u003ccode\u003efalse\u003c/code\u003e.\u003cbr\u003e\u003cbr\u003e\n            By default, the \u003ccode\u003ewarning\u003c/code\u003e and \u003ccode\u003equestion\u003c/code\u003e types have two buttons with the captions \u003cem\u003eOk\u003c/em\u003e and \u003cem\u003eCancel\u003c/em\u003e respectively, while the other types have a single button with the caption \u003cem\u003eOk\u003c/em\u003e.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003evcenter_short_message\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"f/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Should messages shorter than the dialog's height be vertically centered?\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eThis property is ignored when \u003ccode\u003esource\u003c/code\u003e is  \u003ccode\u003eiframe\u003c/code\u003e\u003c/blockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003ewidth\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003einteger\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e0\u003cbr\u003e(uses the value defined in the theme)\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            By default, the width of the dialog box is automatically computed in order to fit the content (but not exceed viewport.\u003cbr\u003e\u003cbr\u003e\n            Can be specified as a numeric value (which will be interpreted as a value in pixels) or as a percentage (of the viewport).\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eIf \u003ccode\u003emax_width\u003c/code\u003e is set to valid value greater than \u003ccode\u003e0\u003c/code\u003e, then this property will be ignored.\u003c/blockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Events\n\n\u003ctable width=\"100%\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth\u003eEvent\u003c/th\u003e\n        \u003cth width=\"100%\"\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003eonOpen\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Event fired \u003cem\u003eafter\u003c/em\u003e the dialog box is opened.\u003cbr\u003e\u003cbr\u003e\n            The callback function receives as unique argument the dialog box, as a jQuery element.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003eonBeforeClose\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Event fired \u003cem\u003ebefore\u003c/em\u003e the dialog box is closed.\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eThe main difference when compared to the \u003ccode\u003eonClose\u003c/code\u003e event is that, with this event, by\n            returning \u003ccode\u003efalse\u003c/code\u003e from the callback function you can prevent the closing of the dialog box - useful\n            for validating user input.\u003c/blockquote\u003e\u003cbr\u003e\n            The callback function receives as first argument the caption of the clicked button or boolean \u003ccode\u003eFALSE\u003c/code\u003e\n            if the dialog box is closed by pressing the \u003ccode\u003eESC\u003c/code\u003e key, by clicking the dialog box's \u003ccode\u003ex\u003c/code\u003e\n            button, or by clicking the backdrop. The argument can also be boolean \u003ccode\u003eTRUE\u003c/code\u003e when the dialog box\n            type is \u003ccode\u003eprompt\u003c/code\u003e and the \u003ccode\u003eENTER\u003c/code\u003e key is pressed while inside the input box.\u003cbr\u003e\u003cbr\u003e\n            As second argument, the callback function receives the value entered in the input box - when the dialog box\n            type is \u003ccode\u003eprompt\u003c/code\u003e and a button was clicked or the \u003ccode\u003eENTER\u003c/code\u003e key was pressed while inside\n            the input box, or \u003ccode\u003eundefined\u003c/code\u003e for any other case.\u003cbr\u003e\u003cbr\u003e\n            All this is important when expecting user input as you can say that you have user input \u003cstrong\u003eonly\u003c/strong\u003e\n            when the value of the first argument is boolean \u003ccode\u003eTRUE\u003c/code\u003eor the value it's the same as the label of\n            the button considered as confirmation (i.e. \"Ok\"), and the value of the second argument is\n            \u003ccode\u003e!==\u0026nbsp;undefined\u003c/code\u003e.\u003cbr\u003e\u003cbr\u003e\n            See the \u003ccode\u003ebuttons\u003c/code\u003e property for another way of handling user input.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003eonClose\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Event fired \u003cem\u003eafter\u003c/em\u003e the dialog box is closed.\u003cbr\u003e\u003cbr\u003e\n            For executing functions \u003cem\u003ebefore\u003c/em\u003e the closing of the dialog box, see the \u003cstrong\u003eonBeforeClose\u003c/strong\u003e\n            event or the \u003cstrong\u003ebuttons\u003c/strong\u003e property.\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eFor properly validating user input you might want to use the \u003cstrong\u003eonBeforeClose\u003c/strong\u003e event\n            or the \u003cstrong\u003ebuttons\u003c/strong\u003e property!\u003c/blockquote\u003e\u003cbr\u003e\n            The callback function receives as first argument the caption of the clicked button or boolean \u003ccode\u003eFALSE\u003c/code\u003e\n            if the dialog box is closed by pressing the \u003ccode\u003eESC\u003c/code\u003e key, by clicking the dialog box's \u003ccode\u003ex\u003c/code\u003e\n            button, or by clicking the backdrop. The argument can also be boolean \u003ccode\u003eTRUE\u003c/code\u003e when the dialog box\n            type is \u003ccode\u003eprompt\u003c/code\u003e and the \u003ccode\u003eENTER\u003c/code\u003e key is pressed while inside the input box.\u003cbr\u003e\u003cbr\u003e\n            As second argument, the callback function receives the value entered in the input box - when the dialog box\n            type is \u003ccode\u003eprompt\u003c/code\u003e and a button was clicked or the \u003ccode\u003eENTER\u003c/code\u003e key was pressed while inside\n            the input box, or \u003ccode\u003eundefined\u003c/code\u003e for any other case.\u003cbr\u003e\u003cbr\u003e\n            All this is important when expecting user input as you can say that you have user input \u003cstrong\u003eonly\u003c/strong\u003e\n            when the value of the first argument is boolean \u003ccode\u003eTRUE\u003c/code\u003eor the value it's the same as the label of\n            the button considered as confirmation (i.e. \"Ok\"), and the value of the second argument is\n            \u003ccode\u003e!==\u0026nbsp;undefined\u003c/code\u003e.\u003cbr\u003e\u003cbr\u003e\n            See the \u003ccode\u003ebuttons\u003c/code\u003e property or the \u003ccode\u003eonBeforeClose\u003c/code\u003e event for other ways of handling user input.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Methods\n\n### `close()`\n\nCall this method to manually close a dialog box.\n\n```javascript\nvar dialog = new $.Zebra_Dialog('This is some information');\n\ndialog.close();\n```\n\n### `update()`\n\nUse this method to adjust the dialog box's position after content is changed dynamically, at run-time.\n\n```javascript\nvar dialog = new $.Zebra_Dialog('This is some information');\n\n// change the content in the dialog box\n$('.ZebraDialog_Body').html('New content');\n\ndialog.update();\n```\n\n## Sponsors\n\nCross browser/device testing is done with\n\n[![BrowserStack](https://github.com/stefangabos/Zebra_Dialog/raw/master/examples/browserstack.png)](https://www.browserstack.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefangabos%2FZebra_Dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstefangabos%2FZebra_Dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefangabos%2FZebra_Dialog/lists"}