Como cargar un pop up al inicio para que se muestre cuando se carga la página en Liferay
1. Descargamos un modal jquery, en teoría se puede usar cualquier, para este caso usaré este modal, porque es sencillo y fácil de usar.
2. Descomprimimos el archivo y encontramos la siguiente estructura:
Encontramos 3 carpetas 1 un archivo html dentro
3. Ahora buscamos la carpeta del template que estamos usando en nuestra página de inicio, generalmente es en una ruta como esta:
M:\liferay6.0\tomcat-6.x.xx\webapps\top-theme\
En mi caso el template que estoy usando se llama top-theme
En esta carpeta encontraremos una estructura parecida a la de la carpeta que anteriormente descomprimimos.
Seleccionamos la carpeta con el modal jquery que descargamos y dentro de ella buscamos la carpeta Css, y copiamos los archivos basic.css y basic_ie.css dentro de la carpeta de nuestro template de liferay que lleva el mismo nombre.
Tenemos una carpeta que se llama img, hacemos lo mismo pero copiamos el contenido de esta carpeta, a la carpeta images de nuestro template de liferay. Cosa similar hacemos con la carpeta js.
Una vez que tenemos los archivos del modal window en la carpeta del template procedemos a cambiar nuestro archivo portal_normal.vm que se encuentra en la carpeta templates.
4. En este paso necesitaremos un editor, de preferencia alguno que nos permita distinguir código html y velocity, en mi caso, usé jEdit que por medio de un buscador lo encontrarán fácilmente.
En la etiqueta head agregamos la siguiente línea:
<link type='text/css' href='/top-theme/css/basic.css' rel='stylesheet' media='screen' />
<link type='text/css' href='/top-theme/css/basic_ie.css' rel='stylesheet' media='screen'
Copiamos este código antes de la etiqueta </body>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Mensaje de Prueba</h3>
<p>Aquí va el texto que necesites</p>
<p>Abajo va la imagen, si es que desea una</p>
<p><img src="/images/min.jpg" alt="Min" height="300" width="300"/></p>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src=' /top-theme/images/basic/x.png' alt='' />
</div>
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type='text/javascript' src='/top-theme/js/jquery.js'></script>
<script type='text/javascript' src='/top-theme /js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='/top-theme/js/basic.js'></script>
5. Ahora vamos a editar el archivo basic.js que copiamos a la carpeta js de nuestro template
jQuery(function ($) {
// Load dialog on page load
$('#basic-modal-content').modal();
// Load dialog on click
// $('#basic-modal .basic').click(function (e) {
// $('#basic-modal-content').modal();
// return false;
//});
});
Y comentamos o quitamos las líneas como puedes ver en la parte superior
6. Es necesario también direccionar adecuadamente un path en el archivo basic.js que se encuentra en la carpeta js de nuestro template.
#simplemodal-container a.modalCloseImg {background:url(/top-theme /images/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
Con esto ya tenemos listo el pop up y podemos probarlo. Recuerda que estos cambios es conveniente hacerlos desde un Ide como eclipse en donde tengas cargado tu template, si vas a hacer estos cambios en un template que esta deployado es recomendable bajar el servidor y entonces hacer los cambios, en algunos casos tendrás que borrar archivos temporales de la carpeta work y temp esto en Tomcat.
Si alguien puede aportar algún cambio que pueda mejorar el artículo sea bienvenido.
