html底部弹出提示框,css – 对话框显示在页面底部

我在所有视图中以这种方式显示对话框：

但它们显示在页面底部

我使用CSS在所有对话框中进行了此更改：

/* Put the dialogs on the top of the screen. It only works on firefox */

.ui-dialog {

position: absolute;

}

/* Disable scroll on the loading dialog */

.disable-scroll .ui-dialog-content {

overflow: hidden;

width: auto;

}

它们没有显示在屏幕顶部？

编辑：

我删除了CSS样式,但对话框仍然出现在iPad的页面底部.明天我将在Mac OS X的safari中进行测试

这是我的styles.css文件：

td.right {

text-align: right;

}

td.center {

text-align: center;

}

table td,table tr {

vertical-align: top;

}

.ui-datatable .ui-datatable-data tr,.ui-datatable .ui-datatable-data-empty tr,.ui-datatable .ui-datatable-data td,.ui-datatable .ui-datatable-data-empty td

{

border-color: #C1DFFA;

}

.odd-row {

background: #ECF5FE;

}

.ui-panelgrid tr,.ui-panelgrid td {

border: none;

}

.ui-panelgrid td {

padding: 2px;

}

.panelgrid-center {

margin: 0 auto !important;

}

.ui-inputfield.uppercased {

text-transform: uppercase;

}

.ui-inputfield {

text-transform: uppercase;

}

.ui-inputfield.no-uppercased {

text-transform: none;

}

.ui-selectonemenu {

width: 144px !important;

}

.ui-selectonemenu-label {

font-size: 95%;

width: 100% !important;

}

.ui-selectonemenu-panel .ui-selectonemenu-list-item {

font-size: 95%;

overflow-x: hidden;

}

.ui-inputtext {

width: 137px !important;

}

.ui-widget {

font-size: 70%;

}

.ui-panel {

float: left;

}

.ui-outputlabel-rfi {

color: red;

}

.ui-outputlabel {

font-weight: bold;

}

.ui-menubar {

background: #C1DFFA;

}

.ui-panel .ui-panel-content {

padding: 0;

}

.ui-datatable thead th,.ui-datatable tbody td,.ui-datatable tfoot td {

padding: 2px;

}

.justify-text {

text-align: justify !important;

}

.negative-number {

color: red;

}

.small-icon {

height: 15px;

width: 15px;

}

.small-inputtext {

width: 80px !important;

}

.full-width {

width: 100%;

}

我的模板文件：

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:o="http://omnifaces.org/ui" xmlns:p="http://primefaces.org/ui"

xmlns:ui="http://java.sun.com/jsf/facelets">

type="image/x-icon" />

$(document).ready(

function() {

$("div[role='tabpanel']").attr("aria-hidden", "false").attr(

"style", "display: block");

$("h3[role='tab']").removeClass("ui-corner-all").addClass(

"ui-corner-top ui-state-active").find("span").attr(

"class", "ui-icon ui-icon-triangle-1-s");

});

...

... Here is located the application menu ...

视图示例：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:o="http://omnifaces.org/ui"

xmlns:of="http://omnifaces.org/functions"

xmlns:p="http://primefaces.org/ui"

xmlns:pe="http://primefaces.org/ui/extensions"

xmlns:ui="http://java.sun.com/jsf/facelets"

template="/WEB-INF/templates/main_template.xhtml">

... Body components ...

header="Find products" id="products"

modal="true" position="top" widgetVar="productsWV">

... Dialog components ...

Chrome在视图内容之前保留了对话框的空间：

上次编辑(找到错误)

添加styles.css文件后,我有以下代码安静：

onstart="loadingDialog.show()" onsuccess="loadingDLG.hide()">

resizable="false" showHeader="false" styleClass="disable-scroll"

widgetVar="loadingDialog">

如果我从模板中删除它,视图和对话框将完美显示.我不知道如何把它放在模板中,因为我需要它