Verint | Telligent Community
Verint | Telligent Community
  • Site
  • User
  • Site
  • Search
  • User
Verint Community 12.x
  • Verint Community
Verint Community 12.x
API Documentation glowModal jQuery Plugin
  • User Documentation
  • Ask the Community
  • API Documentation
  • Manager Training
  • Developer Training
  • Tags
  • More
  • Cancel
  • New
  • API Documentation
  • +In-Process API Documentation
  • +Plugin API Documentation
  • +REST API Documentation
  • -Widget, Theme, and Automation APIs
    • +Automation Events
    • -Client-side APIs
      • +Client Messages
      • +Composer Plugins
      • +JavaScript API Modules
      • +jQuery Events
      • -jQuery Plugins
        • dynamicForm jQuery Plugin
        • evolutionBookmark jQuery Plugin
        • evolutionCodeEditor jQuery Plugin
        • evolutionComposer jQuery Plugin
        • evolutionFeature jQuery Plugin
        • evolutionHighlight jQuery Plugin
        • evolutionHtmlEditor jQuery Plugin
        • evolutionInlineTagEditor jQuery Plugin
        • evolutionLike jQuery Plugin
        • evolutionMasonry jQuery Plugin
        • evolutionModerate jQuery Plugin
        • evolutionPager jQuery Plugin
        • evolutionProgressIndicator jQuery Plugin
        • evolutionResize jQuery Plugin
        • evolutionScrollable jQuery Plugin
        • evolutionScrollSlider jQuery Plugin
        • evolutionSqueezeText jQuery Plugin
        • evolutionStarRating jQuery Plugin
        • evolutionTagTextBox jQuery Plugin
        • evolutionTextEditor jQuery Plugin
        • evolutionTheater jQuery Plugin
        • evolutionTip jQuery Plugin
        • evolutionToggleLink jQuery Plugin
        • evolutionTransform jQuery Plugin
        • evolutionUserFileTextBox jQuery Plugin
        • evolutionValidation jQuery Plugin
        • glowColorSelector jQuery Plugin
        • glowDateTimeSelector jQuery Plugin
        • glowDropDownList jQuery Plugin
        • glowLookUptextBox jQuery Plugin
        • glowModal jQuery Plugin
        • glowMultiUpload jQuery Plugin
        • glowOrderedList jQuery Plugin
        • glowPatternedTextBox jQuery Plugin
        • glowPopUpMenu jQuery Plugin
        • glowPopUpPanel jQuery Plugin
        • glowTabbedPanes jQuery Plugin
        • glowTabSet jQuery Plugin
        • glowTransition jQuery Plugin
        • glowTree jQuery Plugin
        • glowUpload jQuery Plugin
        • uilinks jQuery Plugin
      • +UI Components
    • +Dynamic Configuration
    • +LESS Functions
    • +Script API Types
    • +Script APIs

glowModal jQuery Plugin


jQuery.glowModal

This plugin manages the opening, closing, resizing, and communication of modal windows.

Usage

Open a new modal window. When a url is provided, the IFRAME rendering the modal content is returned. When HTML is provided, the native element wrapping the content is returned.

$.glowModal(options)
$.glowModal(url, options)

Options

  • width: The width, in pixels, of the modal window.
    • default: 300
  • height: The initial height, in pixels, of the modal window.
    • default: 300
  • onClose: A function called with the optional close parameter when the modal window is closed.
    • default: null
  • loadingHtmlUrl: URL of a document to prepopulate in IFRAME-based modals before the content is loaded.
    • default: ''
  • windowWrapperCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags wrapping the modal window.
    • default: '[]'
  • windowCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags of the modal window.
    • default: '[]'
  • windowTitleCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags around the modal window's title.
    • default: '[]'
  • windowCloseCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags around the modal close link.
    • default: '[]'
  • windowContentsCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags around the modal window's content.
    • default: '[]'
  • windowMaskCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags of the modal window mask.
    • default: '[]'
  • windowFooterCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags wrapping the modal window footer.
    • default: '[]'
  • zIndex: The z-index value for the modal window
    • default: 1000
  • openInParentModal: When true, a modal opened from a modal will open in the parent's window. When false, the modal will open within the content of the current modal.
    • default: true
  • url: The URL of an HTML page to render within an IFRAME in the modal. Either url or html is required.
    • default: null
  • html: Either the HTML content or a promise that resolves to the HTML content to render within the modal. When HTML content is provided, it is rendered directly within the content of the modal (and not within an IFRAME). Either html or url are required.
    • default: null
  • title: The title HTML to show on the modal window.
    • default: null
  • footer: HTML to render within the footer of the modal window.
    • default: null
  • loadingHtml: The HTML to render in the modal while a promise is resolving when a promise is defined for the html option.
    • default: '<div style="font-size: 110%; color: #ccc; width: 100%; height: 100%; padding: 10px; text-align: center; vertical-align: middle; box-sizing: border-box;">Loading...</div>'
  • focusOnOpen: When true, the content of the modal will be focused when opened/loaded.
    • default: true
  • animate: A function that implements the modal opening/resizing animation, returning a promise that resolves when the animation is complete.
    • default: A default animation implementation

The animate function is provided with a state entity that varies based on the action value of the state entity:

When intializing a modal, the parameter will be:

{
   action: 'initialize',
   modal: *jQuery object representing the modal*,
   mask: *jQuery object representing the mask*
}

When opening a modal, the parameter will be:

{
    action: 'open',
    modal: *jQuery object representing the modal*,
    mask: *jQuery object representing the mask*,
    x: *the target x coordinate*,
    y: *the target y coordinate*,
    width: *the target width*,
    height: *the target height*
}

When resizing a modal, the parameter will be:

{
    action: 'resize',
    modal: *jQuery object representing the modal*,
    mask: *jQuery object representing the mask*,
    x: *the target x coordinate*,
    y: *the target y coordinate*,
    width: *the target width*,
    height: *the target height*,
    originalWidth: *the original width*,
    originalHeight: *the original height*,
    originalX: *the original x coordinate*,
    originalY: *the original y coordinate*
}

When closing a modal, the parameter will be:

{
    action: 'close',
    modal: *jQuery object representing the modal*,
    mask: *jQuery object representing the mask*,
    x: *the current x coordinate*,
    y: *the current y coordinate*,
    width: *the current width*,
    height: *the current height*
}

Events

  • glowModalOpening: triggered when a modal is opening.
  • glowModalOpened: triggered when a modal has completed opening.
  • glowModalClosing: triggered when a modal is closing.
  • glowModalClosed: triggered when a modal has completed closing.

Methods

close

Closes the current modal window or the modal window opened by a provided opener window context, with the provided close parameter.

$.glowModal.close('return value');
$.glowModal.close('return value', openerWindow);

refresh

Refreshes the rendering of the current modal window or the modal window opened by a provided window opener context.

$.glowModal.refresh();
$.glowModal.refresh(openerWindow);

setTitle

Sets the title HTML of the current modal window or the modal window opened by a provided window opener context.

$.glowModal.setTitle('title');
$.glowModal.setTitle('title', openerWindow);

setFooter

Sets the footer HTML of the current modal window or the modal window opened by a provided window opener context.

$.glowModal.setFooter('footer');
$.glowModal.setFooter('footer', openerWindow);

opener

Gets the window that opened the the provided modal window object (applies to IFRAME-based modals only).

var opener = $.glowModal.opener(modalWindow);
var opener = $.glowModal.opener(modalWindow, openerWindow);

visible

Returns true if a modal window is currently open, otherwise false.

var isVisible = $.glowModal.visible();
var isVisible = $.glowModal.visible(openerWindow);

  • Share
  • History
  • More
  • Cancel
Related
Recommended
  • Telligent
  • Professional Services
  • Submit a Support Ticket
  • Become a Partner
  • Request a Demo
  • Contact Us

About
Privacy Policy
Terms of use
Copyright 2024 Verint, Inc.
Powered by Verint Community