Modal Dialog with Fixed Position

Hello all,

I am trying to display a modal dialog with fixed positioning from a vaadin portlet in Liferay.

I have noticed some strange behaviour with the dialog positioning and drop shadow, however.

At the top of the page the positioning is fine, but if I have scrolled down, the dialog is initially positioned in it’s fixed position, but the shadow window is rendered with an offset related to the distance scrolled down the page.

Even stranger, if I try to drag the dialog, the window itself jumps to the position of the shadow window.

I appreciate any help. I have added the source for creating the dialog and the CSS applied to it below.

private void showDialog(String caption, String description, MessageType type) {
        final Window mainWindow = getApplication().getMainWindow();
        final Window dialogWindow = new Window();

        dialogWindow.setCaption("Notification");

        dialogWindow.setClosable(true);
        dialogWindow.setDraggable(true);
        dialogWindow.setResizable(false);
        dialogWindow.setModal(true);

        dialogWindow.setWidth("50%");
        dialogWindow.setPositionX(mainWindow.getBrowserWindowWidth() / 4);
        dialogWindow.setPositionY(DIALOG_POSITION_Y);

        VerticalLayout layout = new VerticalLayout();
        dialogWindow.setContent(layout);
        layout.setWidth("100%");
        layout.setSpacing(true);
        layout.setMargin(true);

        Label captionLabel = new Label();
        captionLabel.setValue(caption);
        captionLabel.setStyleName("dialog_message");

        Label descriptionLabel = new Label();
        descriptionLabel.setValue(description);
        descriptionLabel.setStyleName("dialog_details");

        Button okButton = new Button("OK");
        okButton.addListener(new ClickListener() {

            /**
             *
             */
            private static final long serialVersionUID = 1L;

            @Override
            public void buttonClick(ClickEvent event) {
                mainWindow.removeWindow(dialogWindow);
            }
        });
        okButton.setStyleName("primary");
        okButton.setSizeUndefined();

        dialogWindow.addComponent(captionLabel);
        dialogWindow.addComponent(descriptionLabel);
        dialogWindow.addComponent(okButton);

        mainWindow.addWindow(dialogWindow);
    }

Window styles:

.v-window {
color: #222;
font-family: inherit;
background: #fff;
background-image: none;
border: 1px solid #ccc;
font-size: 15px;
line-height: 19px;
position: fixed !important;
}
.v-window-wrap {
background: #fff;
background-image: none;
}
.v-window-outerheader {
height: 16px;
margin-left: 0;
background: #f1f1f1;
background-image: none;
}
.v-window-contents {
background: #fff;
border: none;
text-align: center;
}
.v-window div.v-window-footer {
margin-left: 0px;
background: #fff;
background-image: none;
}
.v-window-closebox {
top: 10px;
right: 10px;
width: 24px;
height: 24px;
background: transparent url(common/icons/icon-cancel-black.png);
}
.v-window-closebox:hover {
background-position: 0;
}
.v-window-modalitycurtain {
background: #000;
opacity: 0.7;
filter: alpha(opacity=70);
}
.v-shadow-window {
position: fixed !important;
}
.v-label-dialog_message {
font-weight: bold;
}

EDIT: I should note that this only happens in IE. Firefox and Chrome seem to work fine.