(API) Modal
- plamzi
-
Topic Author
- Offline
- Administrator
Less
More
- Posts: 285
- Thank you received: 42
17 Nov 2013 17:51 - 01 Dec 2014 19:14 #1
by plamzi
(API) Modal was created by plamzi
Modal is a helper module that creates a dialog / popup with text or custom content, and buttons for user actions. It's great for warnings and alerts, login prompts, character creation pickers. It's based on Bootstrap Modal, with extended options.
OPTIONS
EXAMPLE
OPTIONS
| title | Title that should be displayed in the toolbar of the dialog. |
| text | The contents of the dialog. This can be simple text or HTML in which each < and > character is preceded by an ESC (\x1b). |
| mxp | Contents of a dialog containing MXP interactive anchors (and / or ANSI colors). MXP tags in the text have to be wrapped properly in MXP sequences. |
| closeable | Default is true. If set to false, the dialog will not have an 'x' in the top right corner. |
| closeText | The text of the button that dismisses the modal. Default is 'OK'. If an array of 'buttons' is given, this option has no effect because the default button is blown away. |
| buttons | An optional array of objects that add custom buttons to the footer of the dialog. An empty array can be used to strip all footer buttons. Examples:buttons: [{
text: 'Cancel',
click: function() {}
/* or */
send: '/abort'
},
{
text: 'Accept',
send: 'save'
}]buttons: {
'Cancel': '/abort'
'Accept': 'save'
} |
| links | An optional array of objects that adds custom links in the footer of the dialog. The links can be set to call functions using custom portal scripts, or can be set to send a string back to the server. For example:links: {
'Reset password': 'reset',
'Enter token': 'token'
} |
| replace | If set to true, it will do a replace of the Modal contents without a redraw (excessive redrawing can be annoying). This is useful to set to false when you are switching from one modal layout to another (e. g. from one with custom buttons to one with no custom buttons). Default is smart detection (redraw only if switching from one type of modal to another). |
| backdrop | Set to false to not display a dark backdrop for the modal. Set to 'static' to prevent clicks on the dark backdrop from dismissing the modal dialog. Default is true. |
| css | Optional object containing CSS properties such as width and height to be applied to the modal dialog. |
EXAMPLE
new Modal({
title: 'Error',
text: 'Something is wrong. Please reconnect.',
/* or */
mxp: 'Something is wrong. Please <send reconnect>reconnect</send>',
buttons: {
[
text: 'Reload Page',
click: function() { window.location.href = window.location.href }
/* or */
send: 'string to send to server'
]
},
backdrop: 'static',
closeable: false
});
Last edit: 01 Dec 2014 19:14 by plamzi.
The topic has been locked.