(API) Modal

  • plamzi
  • plamzi's Avatar Topic Author
  • Offline
  • Administrator
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.


titleTitle that should be displayed in the toolbar of the dialog.
textThe contents of the dialog. This can be simple text or HTML in which each < and > character is preceded by an ESC (\x1b).
mxpContents of a dialog containing MXP interactive anchors (and / or ANSI colors). MXP tags in the text have to be wrapped properly in MXP sequences.
closeableDefault is true. If set to false, the dialog will not have an 'x' in the top right corner.
closeTextThe 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.
buttonsAn 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'
linksAn 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'
replaceIf 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).
backdropSet 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.
cssOptional object containing CSS properties such as width and height to be applied to the modal dialog.


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.