Friday, February 24, 2017

Overriding the Default Properties of Inline Dialogs

When using inline modal, you can display them using the openModal JavaScript function.

That function is wrapping the jQuery UI Dialog Open method.
/* **********************************************
     From Theme42.js
********************************************** */
window.openModal = function(pDialogId, pDialogTriggerId, pSetFocusId, pClear) {
        $("#" + pDialogId).dialog("open")
    }

What we can do to override the default properties is to set them either on page or right before calling the Open method.

Let's say we would like to have a smaller dialog (e.g. height of 200px)


Option 1

On page load
$('#INLINE_REGION_STATIC_ID').dialog('option', 'height', 200);

Then you can use
openModal('INLINE_REGION_STATIC_ID');
or
$('#INLINE_REGION_STATIC_ID').dialog('open');

Option 2

When openning the Dialog:
$('#INLINE_REGION_STATIC_ID').dialog('option', 'height', 200).dialog('open')

For more information, you can have a look at the Dialog Widget documentation

No comments:

Post a Comment