Primefaces对话框覆盖不起作用

Question

Primefaces对话框覆盖不起作用

Fan*_*nts 0 javascript jsf tomcat overlay primefaces

在发布之前用Google搜索.没有找到最新信息.最后一个问题记录在2011年,建议在css中使用appendTo考虑到答案是基于2011年的primefaces版本,我检查展示文件并没有找到任何相关的内容.制作一个空白的.xhtml来检查primefaces或我的代码是否有问题.令人惊讶的是,它在空白.xhtml上正常工作只是复制了展示案例中的所有内容.(url:http://www.primefaces.org/showcase/ui/overlay/dialog/basic.xhtml)使用Modal示例,您可以在代码的末尾找到它.简单的复制粘贴似乎不起作用.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
    <h:head>
        <link href="css/imgareaselect-animated.css" rel="stylesheet"
        type="text/css" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="scripts/jquery.min.js" />
        <script type="text/javascript"
        src="scripts/jquery.imgareaselect.pack.js" />
        <script type="text/javascript">
            function preview(img, selection)
            {   
                if (!selection.width || !selection.height)
                    return;

                $('#x1').val(selection.x1);
                $('#y1').val(selection.y1);
                $('#x2').val(selection.x2);
                $('#y2').val(selection.y2);
                $('#w').val(selection.width);
                $('#h').val(selection.height);    
            }

            $(function ()
            {
                $('#photo').imgAreaSelect(
                {      
                    onSelectChange: preview
                });
            });

            function teste() {
                alert( document.getElementById('x1').value );
            }
        </script>
    </h:head>
    <h:body>
        <div class="title">
            <p:outputLabel>Psiengine interactive office</p:outputLabel>
        </div>
        <form action="index3.html" onsubmit="teste()" method="post">
            <div>
                <img id="photo" src="images/office.png" />
            </div>
            <div id="container">
                <table style="margin-top: 1em;">
                    <thead>
                        <tr>
                            <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
                                Coordinates
                            </th>
                            <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
                                Dimensions
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="width: 10%;">
                                <b>X<sub>1</sub>:
                                </b>
                            </td>
                            <td style="width: 30%;"><input type="text" id="x1" value="-" /></td>
                            <td style="width: 20%;"><b>Width:</b></td>
                            <td><input type="text" value="-" id="w" /></td>
                        </tr>
                    <tr>
                        <td>
                            <b>Y<sub>1</sub>:
                            </b>
                        </td>
                        <td><input type="text" id="y1" value="-" /></td>
                        <td><b>Height:</b></td>
                        <td><input type="text" id="h" value="-" /></td>
                    </tr>
                    <tr>
                        <td>
                            <b>X<sub>2</sub>:
                            </b>
                        </td>
                        <td><input type="text" id="x2" value="-" /></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>
                            <b>Y<sub>2</sub>:
                            </b>
                        </td>
                        <td><input type="text" id="y2" value="-" /></td>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <h:panelGrid columns="1" cellpadding="5">
                <p:commandButton value="Modal" type="button" onclick="PF('dlg2').show();" />
            </h:panelGrid>

            <p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="100">
                <h:outputText value="This is a Modal Dialog." />
            </p:dialog>   
        </form>
    </h:body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

X-s*_*ert 5

我在Primefaces项目中复制了你的代码(Primefaces 4.0).模态对话框没有问题.(我没有使用你的代码,<h:head />因为有一些错误,你不需要那些代码来触发模态).

提示:当您<p:dialog modal="true" />在<p:layout />组件中使用没有"appendTo"属性时,您将遇到叠加问题(叠加层将出现在对话框面板的前面).我看到Primefaces增加z-index: 0至<p:layoutUnit />所以如果你设置z-index到auto为.ui-layout-unit叠加显示正常.

希望这会帮助你.

归档时间：	11 年，7 月前
查看次数：	2315 次
最近记录：	11 年，7 月前