Crear un modal popup en WordPress mediante Thickbox

Por /

Paso 1

Necesitas agregar thickbox a tu publicación de WordPress. Puede hacer esto agregando la función add_thickbox a la función \’init\’ de su tema. En particular, agregue el siguiente código a su archivo functions.php de tema.

<?php
add_action(\'init\',\'init_theme_method\');
functioninit_theme_method() {
add_thickbox();
}
?>

Paso 2

Ahora podemos simplemente agregar el botón directamente en nuestra publicación y vincularlo a thickbox especificando class=thickbox. Haga clic en la pestaña HTML en su editor de publicaciones y pegue el código HTML a continuación en su publicación.


<div style=\"text-align:center;padding:20px 0;\">
<input alt=\"#TB_inline?height=300&width=400&inlineId=examplePopup1\" title=\"agregue un título al atributo del título / o déjelo en blanco\" class=\"thickbox\" type=\"button\" value=\"Mostrar Thickbox  de ejemplo de Pop-up 1\"/> 
</div>

Step 3

Finalmente, especificamos el contenido que entra en nuestra ventana emergente creando un div con id=examplePopup1.

<div id=\"examplePopup1\"style=\"display:none\">
<h2>Ejemplo Pop-up Window 1</h2>
<div style=\"float:left;padding:10px;\">
<img src=\"https://ebooz.com/wp-content/uploads/social-ebooz-10.jpg\" width=\"150\"height=\"168\"/>
</div>
Crear un modal popup en WordPress mediante Thickbox
<select name=\"\">
<option>test</option>
</select>
<strong>Simplemente haga clic fuera de la ventana emergente para cerrarla. </strong>
</div>

Y así, tenemos nuestra ventana emergente.

Scroll al inicio