Fenêtre modale depuis l'administrateur Wordpress

14

Comment faire fonctionner une fenêtre modale depuis l'administrateur wordpress?

Je veux créer une fenêtre modale qui fonctionnera à partir d'une boîte de méta dans le wp-admin.

Des idées?

admin wp-admin Shae
la source
2
50% est assez faible - n'oubliez pas de revenir à vos anciennes questions et d'accepter les bonnes réponses. Il les enlève de la pile «sans réponse» et aide les autres à trouver plus facilement des solutions. Les gens seront également plus disposés à offrir des réponses s'ils savent que le PO leur répondra. :)
Stephen Harris

Réponses:

16

Donnez à l'ancre une classe de boîte épaisse et assurez-vous que le script de boîte épaisse est mis en file d'attente sur votre page d'administration à l'aide de add_thickbox

add_thickbox();

et

<a href="your url" class="thickbox">click here</a>

Vous pouvez voir ce qui se add_thickboxpasse ici:

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

Tom J Nowell
la source
2
Je pense qu'il n'est peut-être pas nécessaire de mettre en file d'attente la boîte épaisse: elle est automatiquement (au moins dans certains cas) mise en file d'attente sur une page de post-édition. Voir add_thickbox()aussi.
Stephen Harris
Alors, comment pourrais-je le remplir avec du HTML?
Shae
Remarque your url, il charge l'URL de l'ancre dans un iframe
Tom J Nowell
1
Je viens de passer 40 minutes à exporter du modal uniquement bootstrap css et JS et à le mettre dans le tableau de bord -_-. Aurait pu passer 30 secondes à faire ça ...
Archonic
25

Pour utiliser Thickbox pour les fenêtres modales en ligne, vous pouvez utiliser le code suivant.

<?php add_thickbox(); ?>

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

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

http://codex.wordpress.org/ThickBox

Lloyd Erasmus
la source
1
En outre, il est possible de définir un titre de fenêtre modale en ajoutant un attribut de titre au lien ou au bouton. <a href=" YOUR LINK "title=" MODAL WINDOW TITLE" class=" thickbox "> Modal Me </a>
anton