45 lines
1.4 KiB
Svelte
45 lines
1.4 KiB
Svelte
|
<script>
|
||
|
|
import { createEventDispatcher } from "svelte";
|
||
|
|
const dispatch = createEventDispatcher();
|
||
|
|
|
||
|
|
export let title = "modal title";
|
||
|
|
export let className = "";
|
||
|
|
export let classTitle = "";
|
||
|
|
export let classHeader = "";
|
||
|
|
export let size = "";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div
|
||
|
|
class={"modal show " + className}
|
||
|
|
tabindex="-1"
|
||
|
|
aria-hidden="true"
|
||
|
|
style="display: block; background-color: rgb(0 0 0 / 30%)"
|
||
|
|
>
|
||
|
|
<div class={"modal-dialog " + (size ? " modal-" + size : "")}>
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class={"modal-header " + classHeader}>
|
||
|
|
<h5 class={"modal-title " + classTitle}>{title}</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn-close"
|
||
|
|
aria-label="Close"
|
||
|
|
on:click|preventDefault={() => dispatch("close")}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer py-2">
|
||
|
|
<slot name="buttons" />
|
||
|
|
<div class="me-auto" />
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-secondary border border-light"
|
||
|
|
on:click|preventDefault={() => dispatch("close")}>Cerrar</button
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|