// 03_LAYOUT_AND_MODALS
HTML5 DIALOG Modal
Diálogo modal nativo <dialog closedby="any"> con bloqueo de scroll de fondo.
// VISTA PREVIA
> MODAL HTML5 DIALOG
// FRAMEWORK:
src/pages/modal-ejemplo.astro 01 ---
02 import Modal from '@/components/Modal.astro';
03 ---
04
05 <Modal id="demo-modal" title="0xKERNEL // SYSTEM_DIAGNOSTIC" status="ROOT_ACCESS">
06 <p>Diálogo HTML5 nativo con light-dismiss accesible.</p>
07 </Modal>
01 import React, { useRef } from 'react';
02
03 export const ModalDemo: React.FC = () => {
04 const dialogRef = useRef<HTMLDialogElement>(null);
05
06 return (
07 <>
08 <button
09 onClick={() => dialogRef.current?.showModal()}
10 className="btn-brutal bg-[#D62436] text-white px-4 py-2 font-mono text-xs font-bold border-2 border-black shadow-[-4px_4px_0px_0px_#000000]"
11 >
12 > ABRIR MODAL
13 </button>
14
15 <dialog
16 ref={dialogRef}
17 className="border-2 border-black bg-white dark:bg-slate-900 shadow-[-6px_6px_0px_0px_#000000] p-0 font-mono text-xs backdrop:bg-black/60 max-w-lg w-full"
18 >
19 <div className="bg-[#0A0E14] text-white px-3 py-1.5 font-bold flex justify-between items-center border-b-2 border-black">
20 <span>0xMODAL // SYSTEM</span>
21 <button onClick={() => dialogRef.current?.close()} className="px-1 hover:bg-[#D62436]">×</button>
22 </div>
23 <div className="p-5 space-y-4">
24 <h3 className="text-base font-extrabold uppercase">Confirmacion Requerida</h3>
25 <p className="text-slate-600 dark:text-slate-300">¿Deseas reiniciar el cluster de microservicios?</p>
26 <div className="flex justify-end gap-2 pt-2">
27 <button onClick={() => dialogRef.current?.close()} className="px-3 py-1.5 border border-black">Cancelar</button>
28 <button onClick={() => dialogRef.current?.close()} className="px-3 py-1.5 bg-[#D62436] text-white font-bold border border-black">Confirmar</button>
29 </div>
30 </div>
31 </dialog>
32 </>
33 );
34 };
01 <!-- Ryukami HTML5 Native Dialog Modal -->
02 <button onclick="document.getElementById('demo-modal').showModal()" class="btn-brutal bg-[#D62436] text-white px-4 py-2 font-mono text-xs font-bold border-2 border-black shadow-[-4px_4px_0px_0px_#000000]">
03 > ABRIR MODAL
04 </button>
05
06 <dialog id="demo-modal" class="border-2 border-black bg-white dark:bg-slate-900 shadow-[-6px_6px_0px_0px_#000000] p-0 font-mono text-xs backdrop:bg-black/60 max-w-lg w-full">
07 <div class="bg-[#0A0E14] text-white px-3 py-1.5 font-bold flex justify-between items-center border-b-2 border-black">
08 <span>0xMODAL // SYSTEM</span>
09 <button onclick="document.getElementById('demo-modal').close()" class="px-1 hover:bg-[#D62436]">×</button>
10 </div>
11 <div class="p-5 space-y-4">
12 <h3 class="text-base font-extrabold uppercase">Confirmacion Requerida</h3>
13 <p class="text-slate-600 dark:text-slate-300">¿Deseas reiniciar el cluster de microservicios?</p>
14 <div class="flex justify-end gap-2 pt-2">
15 <button onclick="document.getElementById('demo-modal').close()" class="px-3 py-1.5 border border-black">Cancelar</button>
16 <button onclick="document.getElementById('demo-modal').close()" class="px-3 py-1.5 bg-[#D62436] text-white font-bold border border-black">Confirmar</button>
17 </div>
18 </div>
19 </dialog>
// INSTALACIÓN
Terminal // Bash BASH
ryukami-ui add modal
// CÓDIGO DE USO
src/pages/modal-demo.astro ASTRO
01 ---
02 import Modal from '@/components/Modal.astro';
03 ---
04
05 <Modal id="demo-modal" title="0xKERNEL // SYSTEM_DIAGNOSTIC" status="ROOT_ACCESS">
06 <p>Diálogo HTML5 nativo con light-dismiss accesible.</p>
07 </Modal>
src/components/Modal.tsx TSX // REACT
01 import React, { useRef } from 'react';
02
03 export const ModalDemo: React.FC = () => {
04 const dialogRef = useRef<HTMLDialogElement>(null);
05
06 return (
07 <>
08 <button
09 onClick={() => dialogRef.current?.showModal()}
10 className="btn-brutal bg-[#D62436] text-white px-4 py-2 font-mono text-xs font-bold border-2 border-black shadow-[-4px_4px_0px_0px_#000000]"
11 >
12 > ABRIR MODAL
13 </button>
14
15 <dialog
16 ref={dialogRef}
17 className="border-2 border-black bg-white dark:bg-slate-900 shadow-[-6px_6px_0px_0px_#000000] p-0 font-mono text-xs backdrop:bg-black/60 max-w-lg w-full"
18 >
19 <div className="bg-[#0A0E14] text-white px-3 py-1.5 font-bold flex justify-between items-center border-b-2 border-black">
20 <span>0xMODAL // SYSTEM</span>
21 <button onClick={() => dialogRef.current?.close()} className="px-1 hover:bg-[#D62436]">×</button>
22 </div>
23 <div className="p-5 space-y-4">
24 <h3 className="text-base font-extrabold uppercase">Confirmacion Requerida</h3>
25 <p className="text-slate-600 dark:text-slate-300">¿Deseas reiniciar el cluster de microservicios?</p>
26 <div className="flex justify-end gap-2 pt-2">
27 <button onClick={() => dialogRef.current?.close()} className="px-3 py-1.5 border border-black">Cancelar</button>
28 <button onClick={() => dialogRef.current?.close()} className="px-3 py-1.5 bg-[#D62436] text-white font-bold border border-black">Confirmar</button>
29 </div>
30 </div>
31 </dialog>
32 </>
33 );
34 };
public/modal-snippet.html HTML // TAILWIND
01 <!-- Ryukami HTML5 Native Dialog Modal -->
02 <button onclick="document.getElementById('demo-modal').showModal()" class="btn-brutal bg-[#D62436] text-white px-4 py-2 font-mono text-xs font-bold border-2 border-black shadow-[-4px_4px_0px_0px_#000000]">
03 > ABRIR MODAL
04 </button>
05
06 <dialog id="demo-modal" class="border-2 border-black bg-white dark:bg-slate-900 shadow-[-6px_6px_0px_0px_#000000] p-0 font-mono text-xs backdrop:bg-black/60 max-w-lg w-full">
07 <div class="bg-[#0A0E14] text-white px-3 py-1.5 font-bold flex justify-between items-center border-b-2 border-black">
08 <span>0xMODAL // SYSTEM</span>
09 <button onclick="document.getElementById('demo-modal').close()" class="px-1 hover:bg-[#D62436]">×</button>
10 </div>
11 <div class="p-5 space-y-4">
12 <h3 class="text-base font-extrabold uppercase">Confirmacion Requerida</h3>
13 <p class="text-slate-600 dark:text-slate-300">¿Deseas reiniciar el cluster de microservicios?</p>
14 <div class="flex justify-end gap-2 pt-2">
15 <button onclick="document.getElementById('demo-modal').close()" class="px-3 py-1.5 border border-black">Cancelar</button>
16 <button onclick="document.getElementById('demo-modal').close()" class="px-3 py-1.5 bg-[#D62436] text-white font-bold border border-black">Confirmar</button>
17 </div>
18 </div>
19 </dialog>