Différences

Ci-dessous, les différences entre deux révisions de la page.

--- info:infobulles [2009/11/07 07:22] – modification externe 127.0.0.1
+++ info:infobulles [2023/07/31 13:38] (Version actuelle) – [modals] radeff
@@ Ligne 1: / Ligne 1: @@
-/* infobulles  */
+====== Popup is dead, long live to modals & tooltips! ======
+{{:info:toast.jpeg|}}
+====== modals ======
+A modal is a dialog box/popup window that is displayed on top of the current page
+  * https://www.w3schools.com/howto/howto_css_modals.asp
+  * https://www.w3schools.com/w3css/w3css_modal.asp
+  * https://getbootstrap.com/docs/4.0/components/modal/
+  * https://developer.mozilla.org/fr/docs/Web/CSS/:modal
+<html>
+<!-- Button trigger modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
+  Launch demo modal
+</button>
+<!-- Modal -->
+<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <p>
+         yopla!
+        </p>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+  </html>
+====== infobulles / tooltip ======
 http://fr.wikipedia.org/wiki/Infobulle
@@ Ligne 7: / Ligne 44: @@
 en anglais: tooltip http://en.wikipedia.org/wiki/Tooltip
-exemple: source http://www.peutetreunereponse.net/article-6614978.html
+exemple
 <html>
 <style>
@@ Ligne 37: / Ligne 74: @@
     height: 7px;
     width: 11px;
-    background: transparent url(http://www.akademia.ch/dokuwiki/data/media/infobulle.gif);
+    background: transparent url(http://radeff.red/dokuwiki/data/media/infobulle.gif);
     margin:0;
     padding: 0;
@@ Ligne 53: / Ligne 90: @@
 </em></a>
 </html>
 <code>
@@ Ligne 88: / Ligne 124: @@
     border: 0;
 }
 <a href="url-du-lien" class="tooltip">texte du lien<em><span></span>texte de l'infobulle</em></a>
 </code>