- Components
- Modals
Basic
Code
<!-- basic -->
<div x-data="modal" class="mb-5">
<!-- button -->
<div class="flex items-center justify-center">
<button type="button" class="btn btn-primary" @click="toggle">Launch modal</button>
</div>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div x-show="open" x-transition x-transition.duration.300 class="panel border-0 p-0 rounded-lg overflow-hidden my-8 w-full max-w-lg">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<div class="font-bold text-lg">Modal Title</div>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("modal", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Vertically Centered
Code
<!-- vertically centered -->
<div class="mb-5" x-data="modal">
<!-- button -->
<div class="flex items-center justify-center">
<button type="button" class="btn btn-info" @click="toggle">Launch modal</button>
</div>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-center justify-center min-h-screen px-4" @click.self="open = false">
<div x-show="open" x-transition x-transition.duration.300 class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg my-8">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("modal", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Static
Code
<!-- static -->
<div x-data="modal" class="mb-5">
<!-- button -->
<div class="flex items-center justify-center">
<button type="button" class="btn btn-secondary" @click="toggle">Static modal</button>
</div>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4">
<div x-show="open" x-transition x-transition.duration.300 class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg my-8">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<div class="font-bold text-lg">Modal Title</div>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("modal", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Remove animation
Code
<!-- remove animation -->
<div class="mb-5" x-data="modal">
<!-- button -->
<div class="flex items-center justify-center">
<button type="button" class="btn btn-success" @click="toggle">Launch modal</button>
</div>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] px-4 hidden" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg my-8">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle"><svg> ... </svg></button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("modal", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Optional sizes
Code
<!-- extra large -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-warning" @click="toggle">Extra large</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div x-show="open" x-transition x-transition.duration.300 class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-5xl my-8">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle"><svg> ... </svg></button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- large -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-danger" @click="toggle">Large</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div x-show="open" x-transition x-transition.duration.300 class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-xl my-8">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle"><svg> ... </svg></button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- small -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-secondary" @click="toggle">Small</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div x-show="open" x-transition x-transition.duration.300 class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-sm my-8">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("modal", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Video
Code
<!-- video -->
<div class="mb-5" x-data="modal">
<!-- button -->
<div class="flex items-center justify-center">
<button type="button" class="btn btn-primary" @click="toggle">Play Youtube</button>
</div>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div x-show="open" x-transition x-transition.duration.300 class="w-11/12 lg:w-[800px] my-8">
<button type="button" class="text-white-dark hover:text-dark" @click="toggle">
<svg> ... </svg>
</button>
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" class="w-full h-[250px] md:h-[550px]"></iframe>
</div>
</div>
</div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("modal", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Animation Style Modal
Code
<!-- fadein -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-primary" @click="toggle">FadeIn</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg my-8 animate__animated animate__fadeIn">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- slidein down -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-info" @click="toggle">SlideIn Down</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg my-8 animate__animated animate__slideInDown">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- fadein up -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-success" @click="toggle">FadeIn Up</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg my-8 animate__animated animate__fadeInUp">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- fadein left -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-warning" @click="toggle">SlideIn Up</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg my-8 animate__animated animate__slideInUp">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle"><svg> ... </svg></button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- fadein left -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-danger" @click="toggle">FadeIn Left</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg my-8 animate__animated" :class="$store.app.rtlClass === 'rtl' ? 'animate__fadeInRight' : 'animate__fadeInLeft'">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- rotatein left -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-secondary" @click="toggle">RotateIn Left</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg my-8 animate__animated" :class="$store.app.rtlClass === 'rtl' ? 'animate__rotateInDownRight' : 'animate__rotateInDownLeft'">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- fadein right -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-dark" @click="toggle">FadeIn Right</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg my-8 animate__animated" :class="$store.app.rtlClass === 'rtl' ? 'animate__fadeInLeft' : 'animate__fadeInRight'">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- zoomin up -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-primary" @click="toggle">ZoomIn Up</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg my-8 animate__animated animate__zoomInUp">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<div class="dark:text-white-dark/70 text-base font-medium text-[#1f2937]">
<p>Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("modal", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Custom
CodeMore Custom Modals.
<!-- standard -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-primary" @click="toggle">Standard</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div x-show="open" x-transition x-transition.duration.300 class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg my-8">
<div class="flex py-2 bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-center">
<span class="flex items-center justify-center w-16 h-16 rounded-full bg-[#f1f2f3] dark:bg-white/10">
<svg> ... </svg>
</span>
</div>
<div class="p-5">
<div class="py-5 text-white-dark text-center">
<p>Vivamus vitae hendrerit neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi consequat auctor turpis, vitae dictum augue efficitur vitae. Vestibulum a risus ipsum. Quisque nec lacus dolor. Quisque ornare tempor orci id rutrum.</p>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- tabs -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-info" @click="toggle">Tabs</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div x-show="open" x-transition x-transition.duration.300 class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg my-8">
<div class="flex bg-[#fbfbfb] dark:bg-[#121c2c] items-center justify-between px-5 py-3">
<h5 class="font-bold text-lg">Modal Title</h5>
<button type="button" class="text-white-dark hover:text-dark" @click="toggle">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<div class="mb-5" x-data="{tab: 'home'}">
<div>
<ul class="flex flex-wrap mt-3 border-b border-white-light dark:border-[#191e3a]">
<li>
<a href="javascript:;" class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black" :class="{'!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black' : tab === 'home'}" @click="tab = 'home'">Home</a>
</li>
<li>
<a href="javascript:;" class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-[#191e3a] dark:hover:border-b-black" :class="{'!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black' : tab === 'profile'}" @click="tab = 'profile'">Profile</a>
</li>
<li>
<a href="javascript:;" class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-[#191e3a] dark:hover:border-b-black" :class="{'!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black' : tab === 'contact'}" @click="tab = 'contact'">Contact</a>
</li>
<li>
<a href="javascript:;" class="p-3.5 py-2 -mb-[1px] block pointer-events-none text-white-light dark:text-dark">Disabled</a>
</li>
</ul>
</div>
<div class="pt-5 flex-1 text-sm">
<template x-if="tab === 'home'">
<div class="active">
<h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</template>
<template x-if="tab === 'profile'">
<div>
<div class="flex items-start">
<div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
<img src="/assets/images/profile-34.jpeg" alt="image" class="w-20 h-20 m-0 rounded-full ring-4 ring-[#ebedf2] dark:ring-white-dark object-cover" />
</div>
<div class="flex-auto">
<h5 class="text-xl font-medium mb-4">Media heading</h5>
<p class="text-white-dark dark:text-white-dark/70-dark/70">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</template>
<template x-if="tab === 'contact'">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</template>
<div style="display: none;">Disabled</div>
</div>
</div>
<div class="flex justify-end items-center mt-8">
<button type="button" class="btn btn-outline-danger" @click="toggle">Discard</button>
<button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="toggle">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- profile -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-success" @click="toggle">Profile</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div x-show="open" x-transition x-transition.duration.300 class="panel border-0 p-0 rounded-lg overflow-hidden w-11/12 sm:w-[300px] bg-secondary dark:bg-secondary my-8">
<div class="flex items-center justify-end pt-4 ltr:pr-4 rtl:pl-4 text-white dark:text-white-light">
<button type="button" @click="toggle">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<div class="py-5 text-white dark:text-white-light text-center">
<div class="rounded-full w-20 h-20 mx-auto mb-7 overflow-hidden"><img src="/assets/images/profile-16.jpeg" alt="image" class="w-full h-full object-cover" />
</div>
<p class="font-semibold">Click on view to access <br>your profile.</p>
</div>
<div class="flex justify-center gap-4 p-5">
<button type="button" class="btn bg-white text-black dark:btn-dark">View</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- login -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-warning" @click="toggle">Login</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div x-show="open" x-transition x-transition.duration.300 class="panel border-0 py-1 px-4 rounded-lg overflow-hidden w-full max-w-sm my-8">
<div class="flex items-center justify-between p-5 font-semibold text-lg dark:text-white">Login
<button type="button" @click="toggle" class="text-white-dark hover:text-dark">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<form>
<div class="relative mb-4">
<span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
<svg> ... </svg>
</span>
<input type="email" placeholder="Email" class="form-input ltr:pl-10 rtl:pr-10" />
</div>
<div class="relative mb-4">
<span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
<svg> ... </svg>
</span>
<input type="password" placeholder="Password" class="form-input ltr:pl-10 rtl:pr-10" />
</div>
<button type="button" class="btn btn-primary w-full">Login</button>
</form>
</div>
<div class="my-4 text-center text-xs text-white-dark dark:text-white-dark/70">OR</div>
<div class="flex items-center justify-center gap-3 mb-5">
<a href="javascript:void(0);" class="btn btn-outline-primary flex gap-1">
<svg> ... </svg>
<span>Facebook</span>
</a>
<a href="javascript:void(0);" class="btn btn-outline-danger flex gap-1">
<svg> ... </svg>
<span>Github</span>
</a>
</div>
<div class="p-5 border-t border-[#ebe9f1] dark:border-white/10">
<p class="text-center text-white-dark dark:text-white-dark/70">Looking to <a href="javascript:;" class="text-[#515365] hover:underline dark:text-white-dark">create an account?</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- register -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-danger" @click="toggle">Register</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div x-show="open" x-transition x-transition.duration.300 class="panel border-0 py-1 px-4 rounded-lg overflow-hidden w-full max-w-sm my-8">
<div class="flex items-center justify-between p-5 font-semibold text-lg dark:text-white">Register
<button type="button" @click="toggle" class="text-white-dark hover:text-dark">
<svg> ... </svg>
</button>
</div>
<div class="p-5">
<form>
<div class="relative mb-4">
<span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
<svg> ... </svg>
</span>
<input type="text" placeholder="Name" class="form-input ltr:pl-10 rtl:pr-10" />
</div>
<div class="relative mb-4">
<span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
<svg> ... </svg>
</span>
<input type="email" placeholder="Email" class="form-input ltr:pl-10 rtl:pr-10" />
</div>
<div class="relative mb-4">
<span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
<svg> ... </svg>
</span>
<input type="password" placeholder="Password" class="form-input ltr:pl-10 rtl:pr-10" />
</div>
<button type="button" class="btn btn-primary w-full">Login</button>
</form>
</div>
<div class="my-4 text-center text-xs text-white-dark dark:text-white-dark/70">OR</div>
<div class="flex items-center justify-center gap-3 mb-5">
<a href="javascript:void(0);" class="btn btn-outline-primary flex gap-1">
<svg> ... </svg>
<span>Facebook</span>
</a>
<a href="javascript:void(0);" class="btn btn-outline-danger flex gap-1">
<svg> ... </svg>
<span>Github</span>
</a>
</div>
<div class="p-5 border-t border-[#ebe9f1] dark:border-white/10">
<p class="text-center text-white-dark dark:text-white-dark/70">Already have <a href="javascript:;" class="text-[#515365] hover:underline dark:text-white-dark">Login?</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- slider -->
<div x-data="modal">
<!-- button -->
<button type="button" class="btn btn-secondary" @click="toggle">Slider</button>
<!-- modal -->
<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
<div x-show="open" x-transition x-transition.duration.300 class="panel border-0 py-1 px-4 rounded-lg overflow-hidden w-full max-w-xl my-8">
<div class="flex items-center justify-between p-5 font-semibold text-lg dark:text-white">Slider
<button type="button" @click="toggle" class="text-white-dark hover:text-dark">
<svg> ... </svg>
</button>
</div>
<div id="slider1 class="swiper mb-4">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/assets/images/carousel1.jpeg" class="w-full" alt="image" />
</div>
<div class="swiper-slide">
<img src="/assets/images/carousel2.jpeg" class="w-full" alt="image" />
</div>
<div class="swiper-slide">
<img src="/assets/images/carousel3.jpeg" class="w-full" alt="image" />
</div>
</div>
<a href="javascript:;" class="swiper-button-prev-ex grid place-content-center left-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2">
<i class="w-5 h-5">
<svg> ... </svg>
</i>
</a>
<a href="javascript:;" class="swiper-button-next-ex grid place-content-center right-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2">
<i class="w-5 h-5">
<svg> ... </svg>
</i>
</a>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("modal", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
© . Vristo All rights reserved.