I'm trying to build a modal using Tailwind in alpine, point me to the right direction on building a full screen modal using Tailwind CSS and alpine js
Basic modal components (unstyled) can be found here: https://headlessui.dev/react/dialog
The styled one below is a small box, but with CSS you can make it full screen.
import { Dialog, Transition } from '#headlessui/react'
import { Fragment, useState } from 'react'
export default function MyModal() {
let [isOpen, setIsOpen] = useState(true)
function closeModal() {
setIsOpen(false)
}
function openModal() {
setIsOpen(true)
}
return (
<>
<div className="fixed inset-0 flex items-center justify-center">
<button
type="button"
onClick={openModal}
className="px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
>
Open dialog
</button>
</div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog
as="div"
className="fixed inset-0 z-10 overflow-y-auto"
onClose={closeModal}
>
<div className="min-h-screen px-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0" />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span
className="inline-block h-screen align-middle"
aria-hidden="true"
>
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
>
Payment successful
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
Your payment has been successfully submitted. We’ve sent you
an email with all of the details of your order.
</p>
</div>
<div className="mt-4">
<button
type="button"
className="inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-900 bg-blue-100 border border-transparent rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
onClick={closeModal}
>
Got it, thanks!
</button>
</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition>
</>
)
}
Checkout TailWind Toolbox
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tailwind CSS Full Screen Modal</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<style>
.modal {
transition: opacity 0.25s ease;
}
body.modal-active {
overflow-x: hidden;
overflow-y: visible !important;
}
.opacity-95 {opacity: .95;}
</style>
</head>
<body class="bg-gray-900 flex items-center justify-center h-screen">
<button class="modal-open bg-transparent border border-gray-500 hover:border-indigo-500 text-gray-500 hover:text-indigo-500 font-bold py-2 px-4 rounded-full">Open Full Screen Modal</button>
<!--Modal-->
<div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
<div class="modal-overlay absolute w-full h-full bg-white opacity-95"></div>
<div class="modal-container fixed w-full h-full z-50 overflow-y-auto ">
<div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-black text-sm z-50">
<svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
(Esc)
</div>
<!-- Add margin if you want to see grey behind the modal-->
<div class="modal-content container mx-auto h-auto text-left p-4">
<!--Title-->
<div class="flex justify-between items-center pb-2">
<p class="text-2xl font-bold">Full Screen Modal!</p>
</div>
<!--Body-->
<p>Modal content can go here</p>
<!--Footer-->
<div class="flex justify-end pt-2">
<button class="px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2">Action</button>
<button class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Close</button>
</div>
</div>
</div>
</div>
<script>
var openmodal = document.querySelectorAll('.modal-open')
for (var i = 0; i < openmodal.length; i++) {
openmodal[i].addEventListener('click', function(event){
event.preventDefault()
toggleModal()
})
}
const overlay = document.querySelector('.modal-overlay')
overlay.addEventListener('click', toggleModal)
var closemodal = document.querySelectorAll('.modal-close')
for (var i = 0; i < closemodal.length; i++) {
closemodal[i].addEventListener('click', toggleModal)
}
document.onkeydown = function(evt) {
evt = evt || window.event
var isEscape = false
if ("key" in evt) {
isEscape = (evt.key === "Escape" || evt.key === "Esc")
} else {
isEscape = (evt.keyCode === 27)
}
if (isEscape && document.body.classList.contains('modal-active')) {
toggleModal()
}
};
function toggleModal () {
const body = document.querySelector('body')
const modal = document.querySelector('.modal')
modal.classList.toggle('opacity-0')
modal.classList.toggle('pointer-events-none')
body.classList.toggle('modal-active')
}
</script>
</body>
</html>
Related
import React from "react";
import img from '../../../public/images/home/desktop/image-speaker-zx9.png'
export default function Zspeaker()
{
return(
<div className=" mx-auto mt-6 bg-orange-400 w-[85%] rounded-xl ">
<div className=" flex flex-col lg:gap-20 justify-around items-center rounded-xl mx-auto w-[90%] lg:flex-row lg:px-20">
<div className=" relative">
<img className=" w-48 lg:w-64 5" src={img} alt="speaker" />
</div>
<div className="items-center flex flex-col lg:items-start text-white py-7">
<h1 className="text-center text-5xl">ZXP<br></br>Speaker</h1>
<p className="text-center lg:text-justify ">Upgrade to premium speakers that are phenomenally built to deliver truly remarkable sound. </p>
<button className="mt-4 w-1/2 h-11 rounded-xl bg-black hover:scale-105 ease-in duration-500 lg:w-36 ">
Shop Now
</button>
</div>
</div>
</div>
)
}
// Navbar
import React from "react";
import cart from "../assets/images/cart.png"
import { TfiMenu } from "react-icons/tfi";
import { AiOutlineCloseCircle} from "react-icons/ai";
export default function Navbar()
{
const [open,setopen]=React.useState(false)
let Links =[
{name:"Home" ,link:"/"},
{name:"Headphone" ,link:"/"},
{name:"Speaker" ,link:"earphones"},
{name:"Earphone" ,link:"/"},
]
const change=()=>{
setopen(!open)
}
return(
<>
<div className=" z-5000 fixed shadow-md w-full top-0 left-0 ">
<div className=" lg:flex items-center bg-black py-4 md:justify-around">
<div className=" flex justify-between px-3 pt-2 text-white cursor-pointer font-[Poppins]">audiophile
<div onClick={change} className=" lg:hidden w-9 inline-block ">
{open ? <span className=""><AiOutlineCloseCircle/></span>: <span className=""><TfiMenu/></span>}
</div>
</div>
<ul className={`lg:flex md:items-center ${open ?"" :"hidden"} `}>
{
Links.map((link)=>(
<li className=' my-7 ml-8 text-xl '>
<a href={link.link} className='text-white hover:text-yellow-500 duration-500'>{link.name}</a>
</li>
))
}
</ul>
<div className>
<img className="absolute right-20 md:inline-block w-7 cursor- top-5 " src={cart} alt="cart" />
</div>
</div>
</div>
</>
)
}
//Home where all home components are rendered
import React from "react";
import Marktwo from "../Homecomponents/Marktwo";
import Listpage from "../Homecomponents/Listpage";
import Zspeaker from "../Homecomponents/Zspeaker";
export default function Home()
{
return(
<div>
<Marktwo />
<Listpage />
<Zspeaker />
<Zspeaker />
<Zspeaker />
</div>
)
}
Whenever i try to make my div it makes the image of that particular div overlap over navbar when i scrollLike in this picture
my github link this
project:https://github.com/athulmekkoth/ecom/tree/master/client
.........................................................................................................................................................................................................
I use the code Tailwind provides for modals.
It works great on desktop, but the y scroll gets disabled on iPhone and iPad when the content is larger than the screen. It works fine when I test phone/table screen sizes on desktop. What is causing this behaviour?
Here is the code for the Modal (if you want to reproduce you just insert more dummy p-tags until the content is higher than the screen, I removed them for readability):
import { Fragment, useState } from 'react'
import { Dialog, Transition } from '#headlessui/react'
import { CheckIcon } from '#heroicons/react/24/outline'
export default function Example() {
const [open, setOpen] = useState(true)
return (
<Transition.Root show={open} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={setOpen}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
<div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<CheckIcon className="h-6 w-6 text-green-600" aria-hidden="true" />
</div>
<div className="mt-3 text-center sm:mt-5">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
Payment successful
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</p>
// Insert more of these to make the
// content higher than screen
</div>
</div>
</div>
<div className="mt-5 sm:mt-6">
<button
type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:text-sm"
onClick={() => setOpen(false)}
>
Go back to dashboard
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
)
}
When I open my nav bar(for mobile version) on my first page it works fine and overlaps the contents (picture): https://cdn.discordapp.com/attachments/916242216211595264/1001057465795874906/unknown.png
And when I open my navbar on the second page(forms page) the forms overlap the navbar.(picture): https://cdn.discordapp.com/attachments/916242216211595264/1001057531591929876/unknown.png
How could I fix that?
My code for my navbar is:
import React, {useState} from 'react';
import {GiHamburgerMenu} from 'react-icons/gi';
import {AiOutlineClose} from 'react-icons/ai';
import {NavLink} from 'react-router-dom';
const NavBar = () => {
const [isOpen, setIsOpen] = useState(true);
const toggle = () => {
setIsOpen(!isOpen);
}
return (
<div className='flex sticky justify-between items-center h-20 max-w-full mx-auto px-4 text-white top-0'>
<img src={process.env.PUBLIC_URL+"/logo192.png"} alt="none" className='w-9'/>
<ul className='hidden md:flex'>
<NavLink to="/" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[45px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>Home</li></NavLink>
<NavLink to="/details" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[45px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>About</li></NavLink>
<NavLink to="https://www.google.com" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[35px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>Host</li></NavLink>
<NavLink to="/info" activeClassName="active"><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[55px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600'>Tutorial</li></NavLink>
</ul>
<div onClick={toggle} className='block md:hidden'>
{!isOpen ? <AiOutlineClose size={20}/> : <GiHamburgerMenu size={20}/>}
</div>
<div className={!isOpen ? 'fixed left-0 top-1 w-[60%] h-full border-r border-r-gray-800 bg-gray-900 ease-in-out duration-500' : 'fixed left-[-100%] ease-in-out duration-500'}>
<img src={process.env.PUBLIC_URL+"/logo192.png"} alt="none" className='w-9 left-0'/>
<ul className='uppercase p-4'>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Home</li>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>About</li>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Host</li>
<li className='p-4 hover:border-b hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Tutorial</li>
</ul>
</div>
</div>
)
}
export default NavBar;
First page:
import React from 'react'
import Typed from 'react-typed';
import { Link } from 'react-router-dom';
export const Welcome = () => {
return (
<div className="text-white">
<div
id="index"
className="index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<div className="flex justify-center items-center">
<h1 className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6">
Web
</h1>
<Typed
className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-indigo-600"
strings={["site", "Adam"]}
typeSpeed={70}
backSpeed={100}
loop
/>
</div>
<p className="md:text-3xl sm:text-2xl text-xl font-bold py-4 ">
A website that is focused on <a className="underline text-indigo-600">design</a> and
<a className="underline text-indigo-600"> simplicity</a>
</p>
<Link to="/details"><button className="bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-white hover:ring-indigo-600 hover:bg-indigo-600 hover:shadow-xl hover:shadow-indigo-700 hover:text-white hover:scale-110">
Create
</button></Link>
</div>
</div>
)
}
Forms Page:
Code from: https://tailwindui.com/components/application-ui/forms/sign-in-forms (First Form). So how could i make my navbar overlap my forms page?
Increase the z-index of the nav bar so that it is higher than that of the form.
You'll have to work with relative absolute and z-index tailwind classes to overlap the navbar on the contents of the page.
Logic:
Have parent relative having z-index value less than the child absolute div which will be used for navbar.
Output in large device:
Output in smaller device:
Code:
<div class="md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500">
<div class="invisible md:visible bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Further more you can use this tailwind play link
Extra. Toggle mobile navbar using hamburger menu
Output on large devices
Output in small device with hamburger menu
When clicked on hamburger menu
Code:
<body>
<div class="bg-yellow-400 h-screen relative z-0 flex">
<div class="hidden md:block bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl pl-24 md:p-0 main_content">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="mobile_navbar absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 hidden md:hidden"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
<div
class="md:hidden space-y-2 absolute hamburger_menu inset-y-0 left-0 p-4"
>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
</div>
</div>
<script type="text/javascript">
document
.querySelector(".hamburger_menu")
.addEventListener("click", () => {
console.log("Hello");
document.querySelector(".mobile_navbar").classList.toggle("hidden");
});
document.querySelector(".main_content").addEventListener("click", () => {
console.log("Touch me");
console.log(
document
.querySelector(".mobile_navbar")
.classList.contains("hidden") == false &&
document.querySelector(".mobile_navbar").classList.toggle("hidden")
);
});
</script>
</body>
Below is the Sidebar component which was coded in Nextjs,
This is the Sidebar which works well on all browsers but not on Safari on Mac or any browser on iPhone, tried with almost all options and not able to fix this,
did any one facing the same issue, please review and let us know what was missing
import React from "react";
import { GiHamburgerMenu } from "react-icons/gi";
import { Disclosure } from "#headlessui/react";
import {
MdOutlineSpaceDashboard,
MdOutlineAnalytics,
MdOutlineIntegrationInstructions,
MdOutlineMoreHoriz,
MdOutlineSettings,
MdOutlineLogout,
} from "react-icons/md";
import { CgProfile } from "react-icons/cg";
import { FaRegComments } from "react-icons/fa";
import { BiMessageSquareDots } from "react-icons/bi";
function SideNavbar() {
return (
<div>
<Disclosure as="nav">
<Disclosure.Button className="absolute top-4 right-4 inline-flex items-center peer justify-center rounded-md p-2 text-gray-800 hover:bg-gray-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white group">
<GiHamburgerMenu
className="block md:hidden h-6 w-6"
aria-hidden="true"
/>
</Disclosure.Button>
<div className="p-6 w-1/2 h-screen bg-white z-20 fixed top-0 -left-96 lg:left-0 lg:w-60 peer-focus:left-0 peer:transition ease-out delay-150 duration-200">
<div className="flex flex-col justify-start item-center">
<h1 className="text-base text-center cursor-pointer font-bold text-blue-900 border-b border-gray-100 pb-4 w-full">
Virtual Dashboard
</h1>
<div className=" my-4 border-b border-gray-100 pb-4">
<div className="flex mb-2 justify-start items-center gap-4 pl-5 hover:bg-gray-900 p-2 rounded-md group cursor-pointer hover:shadow-lg m-auto">
<MdOutlineSpaceDashboard className="text-2xl text-gray-600 group-hover:text-white " />
<h3 className="text-base text-gray-800 group-hover:text-white font-semibold ">
Dashboard
</h3>
</div>
<div className="flex mb-2 justify-start items-center gap-4 pl-5 hover:bg-gray-900 p-2 rounded-md group cursor-pointer hover:shadow-lg m-auto">
<CgProfile className="text-2xl text-gray-600 group-hover:text-white " />
<h3 className="text-base text-gray-800 group-hover:text-white font-semibold ">
Profile
</h3>
</div>
</div>
</div>
</div>
</Disclosure>
</div>
);
}
export default SideNavbar;
I'm learning Tailwind CSS and I'm having this problem. I did this:
My div with its buttons
And I would like to center it vertically, but when I use flex, this happens:
See here
This is my code:
export default function Home() {
return (
<div className="bg-white max-w-lg mx-auto p-8 md:p-12 my-10 rounded-lg shadow-2xl">
<div>
<h2 className="text-2xl font-bold text-center">¿Who are you?</h2>
</div>
<div className="mt-5">
<button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-color">Admin</button>
</div>
<div className="mt-5">
<button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-color">Client</button>
</div>
</div>
)
}
Use a div wrapper and add flex class to it like this
Your code
export default function Home() {
return (
<div className="flex justify-center flex-col m-auto h-screen">
<div className="bg-white w-1/3 mx-auto p-8 md:p-12 my-10 rounded-lg shadow-2xl">
<div>
<h2 className="text-2xl font-bold text-center">¿Who are you?</h2>
</div>
<div className="mt-5">
<button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-color">Admin</button>
</div>
<div className="mt-5">
<button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-color">Client</button>
</div>
</div>
</div>
)
}
Live Demo
https://play.tailwindcss.com/inCNN5fhkb
Thank you for your answers, I did it in this way:
export default function Home() {
return (
<div className="flex justify-center flex-col m-auto h-screen">
<div className="bg-white w-1/4 mx-auto p-8 my-12 rounded-lg shadow-2xl">
<div>
<h2 className="text-2xl font-bold text-center">¿Who are you?</h2>
</div>
<div className="mt-5">
<Link href='/admin/index.js'>
<button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-color">Admin</button>
</Link>
</div>
<div className="mt-5">
<Link href='/client/index.js'>
<button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-color">Client</button>
</Link>
</div>
</div>
</div>
)
}