HexagonJS
Edit Page
Modal
Displays content in a popup box.
Examples

HTML

<button id="show-modal" class="hx-btn hx-positive">Show Modal</button>

JavaScript

var setupModal = function (node) {
  hx.select(node).text('Modal Text')
}

var modal = new hx.Modal('Modal Popup', setupModal)

hx.select('#show-modal').on('click', function () {
  modal.show()
})

HTML

<button id="show-modal-dialog" class="hx-btn hx-positive">Show Dialog</button>

JavaScript

// callback function - val will be true/false by default.
var dialogCallback = function(val){
  if (val){
    hx.notify("You confirmed the action", {icon: "fa fa-thumbs-up", cssclass: "hx-notification hx-positive" })
  } else {
    hx.notify("You cancelled the action", {icon: "fa fa-thumbs-down", cssclass: "hx-notification hx-negative" })
  }
}

// show the modal when the button is clicked
hx.select('#show-modal-dialog').on('click', function(){
  hx.modal.dialog('Modal Dialog Example', 'Please click Confirm or Cancel', dialogCallback);
});

HTML

<button id="show-modal-dialog-buttons" class="hx-btn hx-positive">Show Dialog with Buttons</button>

JavaScript

// buttons to use in modal
var buttons = [
  { text: "Green",  classes: "hx-btn hx-positive", value: 0 },
  { text: "Red",    classes: "hx-btn hx-negative", value: 1 },
  { text: "Yellow", classes: "hx-btn hx-warning",  value: 2 }
]

// callback function
var dialogCallbackButtons = function(val){
  switch (val) {
    case 0:
      hx.notify("You clicked the green one", {icon: "fa fa-birthday-cake", cssclass: 'hx-positive'} );
      break;
    case 1:
      hx.notify("You clicked the red one", {icon: "fa fa-birthday-cake", cssclass: 'hx-negative'} );
      break;
    case 2:
      hx.notify("You clicked the yellow one", {icon: "fa fa-birthday-cake", cssclass: 'hx-warning'} );
      break;
    case undefined:
      hx.notify.negative("You cancelled the action");
      break;
  }
}

// show the modal when the button is clicked
hx.select('#show-modal-dialog-buttons').on('click', function(){
  hx.modal.dialog('Modal Dialog Example', 'Pick a colored button:', dialogCallbackButtons, {
    buttons: buttons
  });
});

HTML

<button id="show-modal-input" class="hx-btn hx-positive">Show input dialog</button>

JavaScript

// show the modal when the button is clicked
hx.select('#show-modal-input').on('click', function(){

  // callback function - val will be defined if sumbit was
  // selected, false if cancel was selected and undefined if
  // the modal was closed with no action selected
  hx.modal.input('Modal Input Example', 'Enter some text:', function(val){
    if (hx.isString(val)){
      hx.notify.info("You entered: " + val)
    } else {
      hx.notify.negative("You cancelled the action")
    }
  });

});

HTML

<button id="show-modal-positive" class="hx-btn hx-positive">Show positive dialog</button>
<button id="show-modal-warning" class="hx-btn hx-warning">Show warning dialog</button>
<button id="show-modal-negative" class="hx-btn hx-negative">Show negative dialog</button>
<button id="show-modal-info" class="hx-btn hx-info">Show info dialog</button>

JavaScript

// show the modal when the button is clicked
hx.select('#show-modal-warning').on('click', function () {
  // callback function - val will be defined if sumbit was
  // selected, false if cancel was selected and undefined if
  // the modal was closed with no action selected
  hx.modal.dialog('Modal Warning Example', 'You did something that caused a warning.', function (val) {}, {
    titleClass: 'warning',
    icon: 'fa fa-warning'
  })
})

hx.select('#show-modal-positive').on('click', function () {
  hx.modal.dialog('Modal Positive Example', 'You did something positive.', function (val) {}, {
    titleClass: 'positive',
    icon: 'fa fa-check'
  })
})

hx.select('#show-modal-negative').on('click', function () {
  hx.modal.dialog('Modal Negative Example', 'You did something negative.', function (val) {}, {
    titleClass: 'negative',
    icon: 'fa fa-exclamation-circle'
  })
})

hx.select('#show-modal-info').on('click', function () {
  hx.modal.dialog('Modal Info Example', 'You did something that has extra information.', function (val) {}, {
    titleClass: 'info',
    icon: 'fa fa-info'
  })
})
Api
Prototypes
hx.ModalextendsEventEmitter
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
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
Objects
hx.modal
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
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
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.