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

1 comment:

  1. Thanks for sharing, nice post! Post really provice useful information!

    Công ty vận chuyển hàng nước ngoài FadoExpress hàng đầu chuyên vận chuyển, chuyển phát nhanh siêu tốc đi khắp thế giới, nổi bật là dịch vụ gửi hàng đi mỹ, gửi hàng đi úc uy tín, giá rẻ.

    ReplyDelete