Modèle:Modal : Différence entre versions

[version vérifiée][version vérifiée]
 
(51 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{LoadJavascript|Script=modal}}
+
{{LoadJavascript|Script=modal}} {{#if:{{{button|}}}|<div class="button modal-trigger" {{#if:{{{center|}}}|style="margin: 0 auto;"}} {{#if:{{{name|}}}|data-modal="{{{name}}}"}}>{{{button}}}</div>}}
<div class="modalContainer" {{#if:{{{Center|}}}|style="margin: 0 auto;"}}>
+
<div class="modal" style="z-index: 110; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);" {{#if:{{{name|}}}|data-modal="{{{name}}}"}} {{#if:{{{autoClose|}}}|data-auto-close="1"}} {{#if:{{{addEvent|}}}|data-add-event="1"}}>
<div class="button" {{#if:{{{buttonStyle|}}}|style="{{{buttonStyle}}}"}}>{{{1}}}</div>
+
<div style="display: flex; flex-direction: column; max-width: 90%; max-height: 85%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #cbaa74; border: 1px solid black; border-radius: 8px; padding-bottom: 10px; {{#if:{{{overflow|}}}|overflow-y: visible;|overflow-y: auto;}} {{#if:{{{width|}}}|width: {{{width}}};}} {{#if:{{{height|}}}|height: {{{height}}};}}">
<div class="modal" style="z-index: 101;">
+
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div class="modal-content" style="overflow-y: auto; {{#switch:{{{Largeur|1}}}
+
<div style="padding: 10px;">{{{title|}}}</div>
|1=max-width: 800px; width: 90%;
+
<div class="close-button" style="width: 40px; height: 40px; font-size: 32px; user-select: none; display: flex; align-items: center; justify-content: center; border-top-right-radius: 8px; cursor: pointer; padding: 0; position: initial;"><span>×</span></div>
|2=width: fit-content; max-width: 85%;
+
</div>
}} padding: {{#if:{{{Haut|}}}|10px|50px}} 10px 10px 10px;"><span class="close" style="padding: 0; line-height: 40px; width: 40px; text-align: center;">×</span>{{{2}}}</div>
+
<div class="modal-body" style="padding: 0 10px; overflow-y: auto; height: 100%;">{{{content}}}</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<noinclude>
 
<noinclude>
Utilisé dans les modèles [[Modèle:Objets/ObjetsSpeciaux]], [[Modèle:Monstres]] et [[Modèle:Compétences]]
+
Utilisé dans les modèles [[Modèle:Objets/ObjetsSpeciaux]] et [[Modèle:Compétences]]
 
[[Catégorie:Nouveaux modèles]]
 
[[Catégorie:Nouveaux modèles]]
 
</noinclude>
 
</noinclude>

Version actuelle datée du 11 décembre 2024 à 23:41

Utilisé dans les modèles Modèle:Objets/ObjetsSpeciaux et Modèle:Compétences