p:dialog appears on bottom when p:blockUI targets it

Question

I have a PrimeFaces dialog, that has two command buttons that executes some code in the backing bean. I want to block the dialog within the action.

I managed to do it using blockUI, but when the blockUI is present, and I open the dialog, it appears at the bottom of the page.

If I remove the blockUI component, the dialog opens at the center of the page, as I want. But I want it to be centered and with the blockUI.

        <p:dialog header="Attention" id="dialog" position="center"
            widgetVar="dialog" modal="true" closable="false"
            dynamic="true" closeOnEscape="false">

        <div class="internal-margin-top">

                <h:outputText value="Location" styleClass="ui-outputtext" />
                <p:inputText value="#{activityBean.location}"
                    id="inputLocation" maxlength="15">
                </p:inputText>

            </div>
            <div class="internal-margin-bottom">
                <p:commandButton id="closureYes" value="Yes"
                    styleClass="btn-green"
                    onstart="PF('block').show();"
                    oncomplete="PF('dialog').hide(); PF('block').hide();"
                    action="#{activityBean.processItem()}" process="@all">
                </p:commandButton>
                <p:commandButton id="closureNo" value="No"
                    styleClass="btn-red"
                    onstart="PF('block').show();"
                    oncomplete="PF('dialog').hide(); PF('block').hide();"
                    action="#{activityBean.processActivity()}" process="@all" />
            </div>
        </p:dialog>

            <p:blockUI block="scrapDialog" widgetVar="block">
                <p:graphicImage library="images" name="loading_bar.gif" />
            </p:blockUI>

Thanks in advance.

Answer 1

Example with a centered modal dialog:

    <p:dialog header="Header" position="center" widgetVar="wv_dialog" modal="true" closable="false" dynamic="true" closeOnEscape="false">
        <h:form id="dialogform">
            <p:panelGrid columns="1">
                <p:inputText value="test"/>
                <p:inputText value="test"/>
                <p:inputText value="test"/>
                <p:inputText value="test"/>
            </p:panelGrid>
            <p:commandButton id="closebutton" 
                value="Close"
                oncomplete="PF('wv_dialog').hide();"
                action="#{testBean.actionTest()}"
                process="@form"/>
            <p:blockUI block="dialogform" trigger="closebutton"/>
        </h:form>
    </p:dialog>