@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
223 lines (213 loc) • 7.31 kB
HTML
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="/css/main.css" />
<title>Component: docs/components/alerts/modal-centered.html</title>
</head>
<body>
<header style="border-bottom: 1px solid var(--border)" class="p-20">
<div class="d-flex justify-content-between">
<a href="/" class="uss-btn uss-btn--tertiary">
<i class="uss-icon uss-icon--sm ri-home-line"></i>Volver al inicio</a
>
<div>
<button id="_uss-btn-toggle-container" class="uss-btn uss-btn--size-sm uss-btn--tertiary">
[ Toggle .container ]
</button>
</div>
</div>
<h3 class="p-0">docs/components/alerts/modal-centered.html</h3>
</header>
<div id="viewer" class="container my-40" style="border: 1px solid var(--border)">
<section class="w-100 my-128 flex justify-content-center align-items-center">
<section>
<h4>Centered Modals opened by buttons</h4>
<div class="flex gap-12">
<button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-4">Modal info</button>
<button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-5">
Modal warning
</button>
<button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-6">
Modal error
</button>
<button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-7">
Modal success
</button>
</div>
<h4 class="mt-32">Centered Modals opened by window.componentModalInstances</h4>
<div class="flex gap-24">
<button
class="uss-btn uss-btn--tertiary"
onclick="window.componentModalInstances['modal-4'].openModal()"
>
Modal info
</button>
<button
class="uss-btn uss-btn--tertiary"
onclick="window.componentModalInstances['modal-5'].openModal()"
>
Modal warning
</button>
<button
class="uss-btn uss-btn--tertiary"
onclick="window.componentModalInstances['modal-6'].openModal()"
>
Modal error
</button>
<button
class="uss-btn uss-btn--tertiary"
onclick="window.componentModalInstances['modal-7'].openModal()"
>
Modal success
</button>
</div>
</section>
<section>
<!-- centered modals -->
<dialog class="uss-modal uss-modal--centered" data-uss-modal-id="modal-4">
<div class="uss-modal__body">
<div class="uss-modal__icon uss-modal__icon--info">
<i class="uss-icon ri-information-line"></i>
</div>
<div class="w-100 uss-modal__body-content">
<h4>Consectetur adipiscing #5</h4>
<p>
Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum
facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam
quis
</p>
</div>
</div>
<div class="uss-modal__footer">
<a
href="#"
class="uss-btn uss-btn--secondary col-3 justify-content-center"
data-uss-modal-close-on-click
>
Volver
</a>
<a
href="#"
class="uss-btn uss-btn--primary col-3 justify-content-center"
data-uss-modal-close-on-click
onclick="alert('Acción de prueba')"
>
Acción
</a>
</div>
</dialog>
<dialog class="uss-modal uss-modal--centered" data-uss-modal-id="modal-5">
<div class="uss-modal__body">
<div class="uss-modal__icon uss-modal__icon--warning">
<i class="uss-icon ri-alert-line"></i>
</div>
<div class="w-100 uss-modal__body-content">
<h4>Consectetur adipiscing #6</h4>
<p>
Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum
facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam
quis
</p>
</div>
</div>
<div class="uss-modal__footer">
<a
href="#"
class="uss-btn uss-btn--secondary col-3 justify-content-center"
data-uss-modal-close-on-click
>
Volver
</a>
<a
href="#"
class="uss-btn uss-btn--primary col-3 justify-content-center"
data-uss-modal-close-on-click
onclick="alert('Acción de prueba')"
>
Acción
</a>
</div>
</dialog>
<dialog class="uss-modal uss-modal--centered" data-uss-modal-id="modal-6">
<div class="uss-modal__body">
<div class="uss-modal__icon uss-modal__icon--error">
<i class="uss-icon ri-information-line"></i>
</div>
<div class="w-100 uss-modal__body-content">
<h4>Consectetur adipiscing #7</h4>
<p>
Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum
facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam
quis
</p>
</div>
</div>
<div class="uss-modal__footer">
<a
href="#"
class="uss-btn uss-btn--secondary col-3 justify-content-center"
data-uss-modal-close-on-click
>
Volver
</a>
<a
href="#"
class="uss-btn uss-btn--primary col-3 justify-content-center"
data-uss-modal-close-on-click
onclick="alert('Acción de prueba')"
>
Acción
</a>
</div>
</dialog>
<dialog class="uss-modal uss-modal--centered" data-uss-modal-id="modal-7">
<div class="uss-modal__body">
<div class="uss-modal__icon uss-modal__icon--success">
<i class="uss-icon ri-information-line"></i>
</div>
<div class="w-100 uss-modal__body-content">
<h4>Consectetur adipiscing #8</h4>
<p>
Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum
facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam
quis
</p>
</div>
</div>
<div class="uss-modal__footer">
<a
href="#"
class="uss-btn uss-btn--secondary col-3 justify-content-center"
data-uss-modal-close-on-click
>
Volver
</a>
<a
href="#"
class="uss-btn uss-btn--primary col-3 justify-content-center"
data-uss-modal-close-on-click
onclick="alert('Acción de prueba')"
>
Acción
</a>
</div>
</dialog>
</section>
</section>
</div>
</body>
<script type="module" src="/js/main.js"></script>
<script>
const button = document.getElementById('_uss-btn-toggle-container');
button.addEventListener('click', () => {
const viewer = document.getElementById('viewer');
viewer.classList.toggle('container');
});
</script>
</html>