天天看點

html底部彈出提示框,css – 對話框顯示在頁面底部

我在所有視圖中以這種方式顯示對話框:

但它們顯示在頁面底部

我使用CSS在所有對話框中進行了此更改:

.ui-dialog {

position: absolute;

}

.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">

如果我從模闆中删除它,視圖和對話框将完美顯示.我不知道如何把它放在模闆中,因為我需要它