diff --git a/core/modules/utils/dom/modal.js b/core/modules/utils/dom/modal.js index 58fe34efe..1e620aa9a 100644 --- a/core/modules/utils/dom/modal.js +++ b/core/modules/utils/dom/modal.js @@ -26,6 +26,8 @@ Display a modal dialogue options: see below Options include: downloadLink: Text of a big download link to include + event: widget event + variables: from event.paramObject */ Modal.prototype.display = function(title,options) { options = options || {}; @@ -209,6 +211,10 @@ Modal.prototype.display = function(title,options) { headerWidgetNode.addEventListener("tm-close-tiddler",closeHandler,false); bodyWidgetNode.addEventListener("tm-close-tiddler",closeHandler,false); footerWidgetNode.addEventListener("tm-close-tiddler",closeHandler,false); + // Whether to close the modal dialog when the mask (area outside the modal) is clicked + if(tiddler.fields && (tiddler.fields["mask-closable"] === "yes" || tiddler.fields["mask-closable"] === "true")) { + modalBackdrop.addEventListener("click",closeHandler,false); + } // Set the initial styles for the message $tw.utils.setStyle(modalBackdrop,[ {opacity: "0"} diff --git a/core/ui/SwitcherModal.tid b/core/ui/SwitcherModal.tid index 3477f5778..320bbc363 100644 --- a/core/ui/SwitcherModal.tid +++ b/core/ui/SwitcherModal.tid @@ -1,6 +1,7 @@ title: $:/core/ui/SwitcherModal subtitle: <$text text={{{[lookup[$:/language/Switcher/Subtitle/]]}}}/> class: tc-modal-centered +mask-closable: yes <$tiddler tiddler={{{[lookup[$:/config/SwitcherTargets/]]}}}> diff --git a/editions/tw5.com/tiddlers/features/Modals.tid b/editions/tw5.com/tiddlers/features/Modals.tid index 56b596947..045822958 100644 --- a/editions/tw5.com/tiddlers/features/Modals.tid +++ b/editions/tw5.com/tiddlers/features/Modals.tid @@ -13,9 +13,12 @@ The tiddler to be displayed can contain the following optional fields that are u |subtitle|The subtitle text for a modal, displayed in a `h3` html tag| |class|An additional class to apply to the modal wrapper| |help|An optional external link that will be displayed at the left of the footer with the text "Help"| +|mask-closable|When set to ''yes'' or ''true'', will close the modal dialog when the mask (area outside the modal) is clicked| Note that the footer and subtitle fields are not limited to plain text, and wiki text features such as widgets and transclusions can be used as well. Modals are displayed with the [[WidgetMessage: tm-modal]]. <$button message="tm-modal" param="SampleWizard">Open demo modal + +<<.tip """<$macrocall $name=".from-version" version="5.2.4"/> allow using "mask-closable" field""">> diff --git a/editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-modal.tid b/editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-modal.tid index b6db37eef..9a5d8ccd1 100644 --- a/editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-modal.tid +++ b/editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-modal.tid @@ -10,12 +10,14 @@ type: text/vnd.tiddlywiki |paramObject |Hashmap of variables to be provided to the modal, contains all extra parameters passed to the widget sending the message. | |rootwindow |<<.from-version 5.1.18>> ''yes'' or ''true'' will always display a modal in the wiki-root-window | -The "currentTiddler" variable is set to the title of the modal tiddler, but can be overridden by specifying a different value in `paramObject`. - The modal message is usually generated with the ButtonWidget. The modal message is handled by the TiddlyWiki core. [[Fields within the tiddler|Modals]] being displayed in the modal can be used to customize its appearance. +!! paramObject + +The "currentTiddler" variable is set to the title of the modal tiddler, but can be overridden by specifying a different value in `paramObject`. + ! Example Here is an example of displaying a modal and passing parameters to it: