Vex with dialog opened as hidden, shown after a delay about vex HOT 2 CLOSED

Can I use a ready HTML element as the VEX modal which is hidden in the structure and opened as a modal?

from vex.

Opening the dialog hidden and then unhiding is definitely an option.

Consider this jsFiddle example:

var hiddenClass = 'vex-theme-default-hidden';

vex.dialog.alert({
    className: 'vex-theme-default ' + hiddenClass,
    message: 'Message...'
});

setTimeout(function(){
    document.querySelector('.' + hiddenClass).classList.remove(hiddenClass)
}, 3000)

.vex-theme-default-hidden {
    visibility: hidden
}

If you use visibility: hidden, the animation will trigger immediately when vex.dialog.alert is called. If you use display: none, the animation will be triggered when the setTimeout happens. Either will work unless your chat window requires its parent element not be display: none. (This depends on the specific implementation.)

An entirely different approach is to simply open a vex without any content and append (so, essentially, move) your existing DOM element into it. More information can be found about this technique in the vex documentation.

from vex.