Ventana modal desde el panel de administración de WordPress

10 abr 2012, 18:38:45
Vistas: 34.6K
Votos: 21

¿Cómo puedo hacer funcionar una ventana modal desde el panel de administración de WordPress?

Quiero crear una ventana modal que funcione desde una meta box dentro del wp-admin.

¿Alguna idea?

Hay varias formas de implementar una ventana modal en el panel de administración de WordPress:

1. Usando Thickbox (incluido en WordPress):

// En tu función para agregar scripts al admin
function my_admin_scripts() {
    wp_enqueue_script('thickbox');
    wp_enqueue_style('thickbox');
}
add_action('admin_enqueue_scripts', 'my_admin_scripts');

// En tu meta box HTML
echo '<a href="#TB_inline?width=600&height=400&inlineId=my-modal-content" class="thickbox">Abrir Modal</a>';
echo '<div id="my-modal-content" style="display:none;">
    <h2>Mi Contenido Modal</h2>
    <p>Contenido de la ventana modal aquí...</p>
</div>';

2. Usando la API de modales de WordPress:

// En tu archivo JavaScript
jQuery(document).ready(function($) {
    $('#open-modal-button').click(function(e) {
        e.preventDefault();
        
        wp.media.editor.open(null, {
            frame: 'modal',
            title: 'Mi Ventana Modal',
            button: {
                text: 'Aceptar'
            },
            multiple: false
        });
    });
});

3. Usando el componente Modal de WordPress Components:

// Si estás usando Gutenberg o React en WordPress
import { Modal } from '@wordpress/components';

function MyModal() {
    const [isOpen, setIsOpen] = useState(false);
    
    return (
        <>
            <button onClick={() => setIsOpen(true)}>Abrir Modal</button>
            {isOpen && (
                <Modal
                    title="Mi Modal"
                    onRequestClose={() => setIsOpen(false)}
                >
                    <p>Contenido del modal aquí</p>
                </Modal>
            )}
        </>
    );
}

Estas son las formas más comunes y recomendadas para implementar modales en el panel de administración de WordPress, manteniendo la consistencia con la interfaz de usuario nativa de WordPress.

1
Comentarios

50% es bastante bajo - por favor recuerda volver a tus preguntas anteriores y aceptar las respuestas correctas. Esto las quita de la pila de 'no respondidas' y ayuda a otros a encontrar soluciones más fácilmente. La gente también estará más dispuesta a ofrecer respuestas si saben que el OP (autor original de la publicación) les responderá. :)

Stephen Harris Stephen Harris
10 abr 2012 18:47:28
Todas las respuestas a la pregunta 2
1
38

Para usar Thickbox para ventanas modales en línea puedes utilizar el siguiente código.

<?php add_thickbox(); ?>

<a href="#TB_inline?width=600&height=550&inlineId=modal-window-id" class="thickbox">Mostrar Modal</a>

<div id="modal-window-id" style="display:none;">
    <p>Lorem Ipsum sit dolla amet.</p>
</div>

http://codex.wordpress.org/ThickBox

10 oct 2013 21:51:27
Comentarios

También, es posible establecer un título para la ventana modal añadiendo el atributo title al enlace o botón. <a href="YOUR LINK" title="MODAL WINDOW TITLE" class="thickbox">Abrir Modal</a>

anton anton
20 may 2018 16:09:19
4
21

Asigna al ancla una clase de thickbox y asegúrate de que el script thickbox esté encolado en tu página de administración usando add_thickbox

add_thickbox();

y

<a href="tu url" class="thickbox">haz clic aquí</a>

Puedes ver lo que hace add_thickbox aquí:

http://hitchhackerguide.com/2011/02/11/add_thickbox/

10 abr 2012 18:59:36
Comentarios

Creo que podría no ser necesario encolar thickbox: se encola automáticamente (al menos en algunos casos) en la página de edición de entradas. Mira también add_thickbox().

Stephen Harris Stephen Harris
10 abr 2012 19:05:50

¿Entonces cómo lo llenaría con HTML?

Shae Shae
10 abr 2012 20:41:15

Observa your url, carga la URL del ancla en un iframe

Tom J Nowell Tom J Nowell
10 abr 2012 21:48:29

Acabo de pasar 40 minutos exportando solo el CSS y JS modal de Bootstrap y metiéndolo en el panel de control -_-. Podría haber gastado 30 segundos haciendo esto...

Archonic Archonic
29 abr 2015 21:06:04