Question

发布之前用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>

Answer 1

我在Primefaces项目中复制了你的代码（Primefaces 4.0）。模态对话框没有问题。（我没有使用<h:head />中的代码，因为存在一些错误，您不需要该代码来触发模式。

提示：使用<p:dialog modal="true" />时没有＆＃34; appendTo＆＃34; <p:layout />组件中的属性会出现叠加问题（叠加层将出现在对话框面板的前面）。我看到Primefaces将z-index: 0添加到<p:layoutUnit />，因此如果您为z-index设置auto为.ui-layout-unit，则覆盖显示正常。

希望这会对你有所帮助。

Primefaces对话框覆盖不起作用

1 个答案: