Question

我想制作响应模式，帮助我。 Quiero hacer un modal responsivo，por favor。

<p:dialog id="idModal" widgetVar="modalWV" modal="true" width="600" header="Titulo Modal">

   <h:panelGrid id="panelPermisoGuardar" columns="2" cellpadding="10" width="100%"
      //campos
   </p:panelGrid>
</p:dialog>

当我在响应式屏幕上看到它时，它就是这样 Asíseve cuando lo veo en una pantalla responsiva。 Modal no responsivo

Answer 1

我这样解决了（Losolucioneasí）

首先创建一个Dialog，其中包含字段内的面板。（Primero crear el Dialogo con un panel adentro para los campos）

 <p:dialog id="modal" widgetVar="modalWV" modal="true" styleClass="modalResponsivo" header="Titulo Modal">

   <h:panelGrid id="idPanel" columns="2" width="100%" columnClasses="ui-g-12 ui-md-2,ui-g-12 ui-md-10" layout="grid">

   </h:panelGrid>

</p:dialog>

然后为'modalResponsivo'类添加css规则（Despuésagregela regla css para la clase'modalResponsivo'）

@media screen and (max-width: 768px ) {
  .modalResponsivo { width: 90% !important;} }

@media screen and (min-width: 1024px ) {
  .modalResponsivo { width: 30% !important; }
}

这看起来像一个全屏（如同一个pantalla completa）Imagen 1

这就是它看起来如何响应屏幕 Yasíseve en pantalla resposiva：Imagen 2

如何制作主要的重新对话

1 个答案: