Widget:DialogButton und Vorlage:DialogButton: Unterschied zwischen den Seiten

Aus ZUM-Unterrichten
(Unterschied zwischen Seiten)
KKeine Bearbeitungszusammenfassung
 
KKeine Bearbeitungszusammenfassung
 
Zeile 1: Zeile 1:
<includeonly><dialog style="padding: 0" onmousedown="event.target==this && this.close()" id="dialog_<!--{$dialog_id|escape:'htmlall'}-->">
{{DialogButton|Titel=Dialog 1|Inhalt=dialog 1|Link=öffne dialog 1}}
<div class="rahmen">
{{DialogButton|Titel=Dialog 2|Inhalt=dialog 2|Link=öffne dialog 2}}
<!--{$inhalt}-->
 
</div>
 
<form
<onlyinclude><includeonly>{{#widget:Dialog-begin|id=dialog_{{#vardefineecho:dialogbutton|{{#expr:{{#var:dialogbutton}}+1}}}}}}<!--
  style="display:flex;"
--><div class="popup-header">{{{Titel|}}}{{#widget:Dialog-header-close}}</div><div class="popup-body">{{{Inhalt|}}}</div>{{#widget:Dialog-end}}<!--
  method="dialog"
--><span class="zum-dialog-opener" data-dialog-opener-id="dialog_{{#var:dialogbutton}}">{{{Link|öffnen}}}</span>{{#varexists:dialogjsloaded
  padding="0.5rem"
|
  ><button
| {{#widget:Dialog-js}}
    style="margin-left:auto;"  
}}{{#vardefine:dialogjsloaded}}</includeonly></onlyinclude>
    autofocus>schließen</button>
</form>
</dialog><span style="cursor:pointer" id="dialog_button_<!--{$dialog_id|escape:'htmlall'}-->"><!--{$link}--></span>
<script>
(function(){
  const link = document.getElementById('dialog_button_' + '<!--{$dialog_id|escape:'htmlall'}-->');
  const dialog = document.getElementById('dialog_' + '<!--{$dialog_id|escape:'htmlall'}-->');
  if(!link){return;}
  if(!dialog){return;}
  link.addEventListener('click', function(e){
    dialog.showModal();
  }, {});
})();
</script></includeonly>

Version vom 12. Februar 2024, 23:33 Uhr

Dialog 1
dialog 1

öffne dialog 1

Dialog 2
dialog 2

öffne dialog 2


Abgerufen von „https://unterrichten.zum.de/index.php?title=Widget:DialogButton&oldid=136935“