¿Se puede personalizar la ventana modal de Wicket?

3

De acuerdo con /org/apache/wicket/extension/ajax/markup/html/modal/res/modal.js no se puede modificar el decorador modal de ventanas mediante wicket api porque el marcado modal de la ventana se define por completo en javascript. Entonces, como siempre, puede seleccionar la manera simple pero mala y reemplazar modal.js por su cuenta, o puede cambiar el modo de ventana modal después de mostrar usando js para modificar el lapso con la clase "w_captionText". O puede ser (no lo estoy probando) usted puede definir su código personalizado en la propiedad Caption y decir wicket para que no se escape caracteres html especiales en este título. Puede ser que ayude

Fuente

2009-09-08 14:10:16

+0

Hmpf ... oh bien, gracias de todos modos. – Yuval

+0

Si fuiste de la manera más simple. ¿Qué harías exactamente para anular modal.js? –

6

Puede lograr ese tipo de efecto con la ayuda de CSS. Crea tu ventana modal personalizada (en caso de que no quieras crear tu estilo personalizado) y especifica el recurso css.

package org.ru5.test; 

import org.apache.wicket.ResourceReference; 
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow; 
import org.apache.wicket.markup.html.CSSPackageResource; 
import org.apache.wicket.markup.html.resources.CompressedResourceReference; 
import org.apache.wicket.model.IModel; 

public class CustomModalWindow extends ModalWindow { 
    private static final long serialVersionUID = 1L; 

    private static ResourceReference CSS = new CompressedResourceReference(
      CustomModalWindow.class, "res/custom-modal.css"); 

    /** 
    * Creates a new modal window component. 
    * 
    * @param id 
    *   Id of component 
    */ 
    public CustomModalWindow(final String id) { 
     super(id); 
     init(); 
    } 

    /** 
    * Creates a new modal window component. 
    * 
    * @param id 
    *   Id of component 
    * @param model 
    *   Model 
    */ 
    public CustomModalWindow(final String id, final IModel<?> model) { 
     super(id, model); 
     init(); 
    } 

    private void init() { 
     add(CSSPackageResource.getHeaderContribution(CSS)); 
    } 

}

/org/ru5/test/CustomModalWindow.html

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org"> 
<body><wicket:panel><div wicket:id="content"></div></wicket:panel></body> 
</html>

todo lo necesario:

/org/ru5/test/res/custom-modal.css

.headBtn{position: absolute; z-index: 20001; top: 2px; left: 200px;}

/org/ru5/test/TestPanelForTestWindow.html

.... 
<div class="headBtn"> 
<input type="button" value="ok"> 
</div> 
....

Puede intentar anular la función modal.js o simplemente hacer un truco con la ayuda de JS DOM. Espero que esto ayude.

Fuente

2010-09-27 12:57:59 Ru5

2

poco de un truco, pero funciona:

import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow; 
import org.apache.wicket.model.IModel; 

public class FixedModalWindow extends ModalWindow { 
    private static final long serialVersionUID = 1L; 

    public FixedModalWindow(String id) { 
    super(id); 
    setResizable(false); 
    } 

    public FixedModalWindow(String id, IModel<?> model) { 
    super(id, model); 
    setResizable(false); 
    } 

    @Override 
    public FixedModalWindow setResizable(boolean resizable) { 
    // Cannot set resizable on the FixedModalWindow 
    return this; 
    } 

    @Override 
    public boolean isResizable() { 
    return false; 
    } 

    @Override 
    protected Object getShowJavascript() 
    { 
    // Hack in some JS to remove the onMove handlers 
    StringBuffer showJS = new StringBuffer(); 
    showJS.append(" "); 
    showJS.append((String) super.getShowJavascript()); 
    showJS.append("var popupWindow = Wicket.Window.get();\n"); 
    showJS.append("var nullHandler = function() {};\n"); 
    showJS.append("if(popupWindow != null) {\n"); 
    showJS.append("popupWindow.bind(popupWindow.caption, nullHandler);\n"); 
    showJS.append("popupWindow.bind(popupWindow.bottomRight, nullHandler);\n"); 
    showJS.append("popupWindow.bind(popupWindow.bottomLeft, nullHandler);\n"); 
    showJS.append("popupWindow.bind(popupWindow.bottom, nullHandler);\n"); 
    showJS.append("popupWindow.bind(popupWindow.left, nullHandler);\n"); 
    showJS.append("popupWindow.bind(popupWindow.right, nullHandler);\n"); 
    showJS.append("popupWindow.bind(popupWindow.topLeft, nullHandler);\n"); 
    showJS.append("popupWindow.bind(popupWindow.topRight, nullHandler);\n"); 
    showJS.append("popupWindow.bind(popupWindow.top, nullHandler);\n"); 
    showJS.append("}\n"); 
    return showJS.toString(); 
    } 

}

Fuente

2010-10-16 21:48:17 equinox

1

Cómo ocultar botón de cierre de la ventana modal en el portillo? Hemos encontrado una solución de este tipo:

ModalWindow yourModal = new ModalWindow("yourModalID") { 
     @Override 
     public void show(AjaxRequestTarget pTarget) { 
      super.show(pTarget); 

      pTarget.appendJavascript(""// 
        + "var thisWindow = Wicket.Window.get();\n"// 
        + "if (thisWindow) {\n"// 
        + "$('.w_close').attr('style', 'display:none;');\n"// 
        + "}"// 
      ); 
     } 
}

En realidad, puede insertar cualquier clase de ventana modal, y cambiarlo de alguna manera. Espero que ayude a alguien :)

Fuente

2014-04-18 06:55:47 Gytis

¿Se puede personalizar la ventana modal de Wicket?

Respuesta

Cuestiones relacionadas