Comment créer une boîte de dialogue sur WoltLab Suite 3

Bonjour cher visiteur,


Je n'ai malheureusement plus beaucoup le temps de m'occuper du site en ce moment, si le projet de l'animer t'intéresse, n'hésite pas à me contacter ! :)

Vous souhaitez créer une boîte de dialogue personnalisée sur votre site WoltLab ?

Suivez ce tutoriel pour savoir comment faire cela !




Créer la boîte de dialogue

Avant tout vous devez éditer un modèle (Template) depuis votre administration, suivez l'article suivant pour savoir comment faire cela : Comment personnaliser un modèle sur un site utilisant WoltLab Suite 3


Dès que vous aurez créé un modèle personnalisé, vous devrez alors ajouter le code suivant :


Explications du code


Ici nous avons créé un simple lien vers la boîte de dialogue : <a id="myModal" href="#myModal" title="My Title" class="jsTooltip button"><span class="icon icon32 fa-check"></span> Hello !</a>

Nous avons précisé l'ID "myModal" ainsi que le lien "#myModal" et allons les appeler grâce au code Javascript plus bas.


Puis nous avons créé la boîte de dialogue :

HTML
  1. <div id="modal" style="display:none;">
  2. <p>Bonjour</p>
  3. </div>

Nous avons précisé l'ID "modal" pour cette boîte, et avons entré le contenu de cette boîte : <p>Bonjour</p>


Pour terminer, nous avons fait fonctionner tout cela grâce à du JavaScript :

JavaScript
  1. <script data-relocate="true">
  2. $(function() {
  3. $('#myModal').click(function(event) {
  4. event.preventDefault();
  5. $('#modal').wcfDialog({ title:"My Title" });
  6. });
  7. });
  8. </script>

Ce code nous indique cela : lors du clic du bouton dont l'ID est "myModal", ouvrir la boîte de dialogue donc l'ID est "modal", et lui assigner le titre "My Title".


Et voilà, vous avez créé votre boîte de dialogue sur votre site sous WoltLab Suite 3 !

    Partager

    Commentaires