HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Modal
Displays content in a popup box.
Examples

HTML

<button id="modal-center" class="hx-btn hx-flag-button">Show Center Modal</button>

JavaScript

hx.select('#modal-center').on('click', () => {
  hx.modalCenter({
    title: 'Modal Title',
    renderBody: () => hx.div().text('Modal Body'),
    renderFooter: thisModal => hx.button('hx-btn hx-secondary')
      .on('click', () => thisModal.hide())
      .text('Ok'),
  });
})

HTML

<button id="modal-right" class="hx-btn hx-flag-button">Show Right Modal</button>

JavaScript

hx.select('#modal-right').on('click', () => {
  hx.modalRight({
    title: 'Modal Title',
    renderBody: () => hx.div().text('Modal Body'),
    renderFooter: thisModal => hx.button('hx-btn hx-secondary')
      .on('click', () => thisModal.hide())
      .text('Ok'),
  });
})

HTML

<button id="modal-full-screen" class="hx-btn hx-flag-button">Show Full Screen Modal</button>

JavaScript

hx.select('#modal-full-screen').on('click', () => {
  hx.modalFullScreen({
    title: 'Modal Title',
    renderBody: () => hx.div().text('Modal Body'),
    renderFooter: thisModal => hx.button('hx-btn hx-secondary')
      .on('click', () => thisModal.hide())
      .text('Ok'),
  });
})
Api
Change Log
Prototypes
hx.ModalextendsEventEmitterdeprecated
Deprecated
This Modal has been replaced by the new Modal class returned by modalCenter, modalRight and modalFullScreen
For displaying pop-up content. They are best reserved for cases when the user is doing something out of the ordinary, as a one off task. If there is a sensible place to display the same content on the page itself, do that instead.
Constructors
hx.ModaltitleStringsetupFunctionoptionsObject
Arguments
titleString
The title that should be shown in the modal's title bar.
setupelementHTMLElementmodalModal
A function that takes an HTMLElement as it's first argument, and sets up the content of the modal using that element.
Arguments
elementHTMLElement
The modal content element to populate.
modalModal
The current modal
options
Configuration options for the modal.
Properties
closeButtonEnabledBoolean
Whether the modal should have a close button
closeWithShadeEnabledBoolean
Whether clicking on the shaded background around the modal should close it
headerRenderernodeElementtitleNodeElementcloseButtonNodeElementmodalModal
Renderer function for the modal header. The header contains both the titlebar and the close button for a modal.
Default: 
function (node, titleNode, closeButtonNode) {
  hx.select(node).add(titleNode).add(closeButtonNode)
}
Arguments
nodeElement
The node for the modal header. This contains the title and the close button.
titleNodeElement
The node for the modal title.
closeButtonNodeElement
The node for the modal close button. If closeButtonEnabled is false, this will be undefined.
modalModal
The current modal
titlebarRendererelementHTMLElementmodalModal
Renderer function for the titlebar. The this context for the function is this modal.
Default: 
function (node) {
  hx.select(node).text(this.title)
}
Arguments
elementHTMLElement
The node for the modal title.
modalModal
The current modal
Properties
options
Configuration options for the modal. See the options parameter of the constructor for the available options.
Events
hide
Emitted when the modal is hidden. No data is sent with this event.
hideend
Emitted when the modal hide animation ends. No data is sent with this event.
hidestart
Emitted when the modal hide animation starts. No data is sent with this event.
show
Emitted when the modal is shown. No data is sent with this event.
showend
Emitted when the modal show animation finishes. No data is sent with this event.
showstart
Emitted when the modal show animation starts. No data is sent with this event.
Methods
hideModal
Hides the modal.
Returns
Modal
This Modal
showModal
Shows the modal.
Returns
Modal
This Modal
Modal
The type returned when calling the three modal functions:
  • modalCenter
  • modalRight
  • modalFullScreen
Methods
closecallbackFunction
The function called by the close button and when the user presses 'Escape' for modals that show the close button.
The default action will be to call hide immediately. Providing options.onClose will override this and call the provided method instead, allowing the close action to be intercepted without closing the modal.
Arguments
callback
The function to call when the modal has been hidden and the animation is complete.
hidecallbackFunctionModal
Hides the modal.
Alias for isOpen(false)
Arguments
callback
The function to call when the modal has been hidden and the animation is complete.
Returns
Modal
Returns this Modal
isOpenBoolean
Returns the current open state of the Modal
Returns
Boolean
Whether the modal is open
isOpenopenBooleancallbackFunction
Set the open state of the modal (and animate if changing state)
Arguments
openBoolean
Whether the modal should be open.
callback
The function to call when the modal has been shown/hidden and the animation has completed.
render
A method to update the content of a modal using the renderBody and renderFooter options.
This is called whenever the modal transitions from closed to open.
This is useful when the data rendered in the modal needs to be redrawn after the source data has been updated.
showcallbackFunctionModal
Shows the modal.
Alias for isOpen(true)
Arguments
callback
The function to call when the modal has been shown and the animation is complete.
Returns
Modal
Returns this Modal
Objects
hx.modaldeprecated
Deprecated
The modal object has been replaced by specific filter methods directly on the hx object.
An object containing functions for creating common modals.
Functions
dialogtitleStringmessageStringcallbackFunctionoptionsObjectModal
A function for creating a simple modal popup with a title, a message and some buttons.
Arguments
titleString
The title for the modal.
messageString
The message for the modal.
callbackvalueString / Boolean
The function that gets called when a button is clicked.
Arguments
valueString / Boolean
The value of the button clicked. Default values are true/false but can be set to anything using the buttons parameter.
options
Options for configuring the dialog.
Properties
buttons
The array of buttons to show in the modal.
The default buttons that are used if the buttons parameter is passed in as null or undefined is as follows: 
[
  {
    text: "Confirm"
    icon: "fa fa-check"
    value: true
    classes: "hx-btn hx-positive"
  },{
    text: "Cancel"
    icon: "fa fa-close"
    value: false
    classes: "hx-btn hx-negative"
  }
]
isClosableBoolean
Whether or not the modal should show a close button.
Default: false
titleClassString
The class to use when rendering the titlebar.
This should be one of the 'hx-background-' classes but without the prefix, e.g. 'positive' or 'negative'
iconString
Returns
Modal
The newly constructed Modal
inputtitleStringmessageStringcallbackFunctionoptionsObjectModal
A function for creating a simple modal popup with a title, a message and an input box (and confirm and cancel buttons).
Arguments
titleString
The title for the modal.
messageString
The message for the modal.
callbackvalueString
The function that gets called when a button is clicked.
Arguments
valueString
The string value entered into the modal's input box, or false if the cancel button was clicked, or undefined if the close button was clicked in the titlebar of the modal.
options
Properties
isClosableBoolean
Whether or not the modal should show a close button.
Default: true
valueString
Initial text to place in the input box.
Returns
Modal
The newly constructed Modal
Functions
modalDialogtitleStringmessageStringcallbackFunctionoptionsObjectModaldeprecated
Deprecated
This has been replaced by modalCenter
A function for creating a simple modal popup with a title, a message and some buttons.
Arguments
titleString
The title for the modal.
messageString
The message for the modal.
callbackvalueString / Boolean
The function that gets called when a button is clicked.
Arguments
valueString / Boolean
The value of the button clicked. Default values are true/false but can be set to anything using the buttons parameter.
options
Options for configuring the dialog.
Properties
buttons
The array of buttons to show in the modal.
The default buttons that are used if the buttons parameter is passed in as null or undefined is as follows: 
[
  {
    text: "Confirm"
    icon: "fa fa-check"
    value: true
    classes: "hx-btn hx-positive"
  },{
    text: "Cancel"
    icon: "fa fa-close"
    value: false
    classes: "hx-btn hx-negative"
  }
]
isClosableBoolean
Whether or not the modal should show a close button.
Default: false
titleClassString
The class to use when rendering the titlebar.
This should be one of the 'hx-background-' classes but without the prefix, e.g. 'positive' or 'negative'
iconString
Returns
Modal
The newly constructed Modal
modalInputtitleStringmessageStringcallbackFunctionoptionsObjectModaldeprecated
Deprecated
This has been replaced by modalCenter
A function for creating a simple modal popup with a title, a message and an input box (and confirm and cancel buttons).
Arguments
titleString
The title for the modal.
messageString
The message for the modal.
callbackvalueString
The function that gets called when a button is clicked.
Arguments
valueString
The string value entered into the modal's input box, or false if the cancel button was clicked, or undefined if the close button was clicked in the titlebar of the modal.
options
Properties
isClosableBoolean
Whether or not the modal should show a close button.
Default: true
valueString
Initial text to place in the input box.
Returns
Modal
The newly constructed Modal
modalCenteroptionsObjectModal
Renders a modal in the center of the screen
Arguments
options
Properties
animate
Whether to animate the modal in/out.
Does not apply to the modal backdrop which will always fade in/out as it does not have an effect on user interaction or flows.
Default: true
isOpen
Whether the modal should be open when creating it. Set to false if you want to open a modal later in the code or have more than one method of opening a modal.
Default: true
renderBody
The function used to render the body of the modal.
One of renderFooter or renderBody is required when creating a modal.
Default: undefined
renderFooter
The function used to render the footer of the modal.
One of renderFooter or renderBody is required when creating a modal.
Default: undefined
title
The title to display at the top of the modal. This is required for all modals.
Returns
Modal
The constructed Modal
modalFullScreenoptionsObjectModal
Renders a modal that covers the whole screen.
Arguments
options
Properties
animate
Whether to animate the modal in/out.
Does not apply to the modal backdrop which will always fade in/out as it does not have an effect on user interaction or flows.
Default: true
isOpen
Whether the modal should be open when creating it. Set to false if you want to open a modal later in the code or have more than one method of opening a modal.
Default: true
onClose
The function to call when the user clicks the close button or presses the escape key.
By default, clicking the close button or pressing escape will call the hide method. If this options is provided, it will be used instead and the modal will not be hidden.
This is primarily intended to be used to add a confirmation (i.e. 'Are you sure you want to close, you have unsaved changes') and should always include an action that either calls hide or allows the user to continue editing the information.
Default: undefined
renderBody
The function used to render the body of the modal.
One of renderFooter or renderBody is required when creating a modal.
Default: undefined
renderFooter
The function used to render the footer of the modal.
One of renderFooter or renderBody is required when creating a modal.
Default: undefined
title
The title to display at the top of the modal. This is required for all modals.
Returns
Modal
The constructed Modal
modalRightoptionsObjectModal
Renders a modal displayed on the right hand side of the screen
Arguments
options
Properties
animate
Whether to animate the modal in/out.
Does not apply to the modal backdrop which will always fade in/out as it does not have an effect on user interaction or flows.
Default: true
isOpen
Whether the modal should be open when creating it. Set to false if you want to open a modal later in the code or have more than one method of opening a modal.
Default: true
onClose
The function to call when the user clicks the close button or presses the escape key.
By default, clicking the close button or pressing escape will call the hide method. If this options is provided, it will be used instead and the modal will not be hidden.
This is primarily intended to be used to add a confirmation (i.e. 'Are you sure you want to close, you have unsaved changes') and should always include an action that either calls hide or allows the user to continue editing the information.
Default: undefined
renderBody
The function used to render the body of the modal.
One of renderFooter or renderBody is required when creating a modal.
Default: undefined
renderFooter
The function used to render the footer of the modal.
One of renderFooter or renderBody is required when creating a modal.
Default: undefined
title
The title to display at the top of the modal. This is required for all modals.
wideBoolean
Whether the modal should be wider than a standard right modal.
The size of the standard and wide modals should be defined by the theme that is currently in use.
Returns
Modal
The constructed Modal
Classes
hx-modal-container
The class given to the modal container.
Classes
hx-modal
The class given to the modal itself, containing all the modal content.
Classes
hx-modal-content
The class given to the modal content.
hx-modal-title
The class given to the modal titlebar. Also includes the close button.
Classes
hx-modal-close
The class given to the close button if it is present.
Extra Classes
hx-modal-title-empty
The class given to the modal titlebar when the title provided is null, undefined or has a length of 0 to determine that it has no content.
hx-modal-shade
The class given to the semi-transparent overlay shown over the page.