I am working on a project using React and Tailwind CSS and I would like to implement a modal but I have some problems to do that. Here is my code for the Modal using tailwind and react:
import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";
import Navbar from "./components/Navbar";
import LivePortal from "./components/LivePortal";
import WorkContainer from "./components/WorkContainer";
import HomePage from "./components/Homepage";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
const App = () => {
return(
<>
<div class="p-3">
<button onclick="openModal(true)" class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded text-white focus:outline-none">
Open Modal
</button>
</div>
<div id="modal_overlay" class="hidden absolute inset-0 bg-black bg-opacity-30 h-screen w-full flex justify-center items-start md:items-center pt-10 md:pt-0">
<div id="modal" class="pacity-0 transform -translate-y-full scale-150 relative w-10/12 md:w-1/2 h-1/2 md:h-3/4 bg-white rounded shadow-lg transition-opacity transition-transform duration-300">
<button
onclick="openModal(false)"
class="absolute -top-3 -right-3 bg-red-500 hover:bg-red-600 text-2xl w-10 h-10 rounded-full focus:outline-none text-white">
✗
</button>
<div class="px-4 py-3 border-b border-gray-200">
<h2 class="text-xl font-semibold text-gray-600">Title</h2>
</div>
<div class="w-full p-3">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores, quis tempora! Similique, explicabo quaerat maxime corrupti tenetur blanditiis voluptas molestias totam? Quaerat laboriosam suscipit repellat aliquam blanditiis eum quos nihil.
</div>
<div class="absolute bottom-0 left-0 px-4 py-3 border-t border-gray-200 w-full flex justify-end items-center gap-3">
<button class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded text-white focus:outline-none">Save</button>
<button
onclick="openModal(false)"
class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded text-white focus:outline-none"
>Close</button>
</div>
</div>
</div>
</>
);
}
export default App;
I would like to use that script below to open the modal and close it but I don't know how can I do that. Could you help me please? Thank you very much
<script>
const modal_overlay = document.querySelector('#modal_overlay');
const modal = document.querySelector('#modal');
function openModal (value){
const modalCl = modal.classList
const overlayCl = modal_overlay
if(value){
overlayCl.classList.remove('hidden')
setTimeout(() => {
modalCl.remove('opacity-0')
modalCl.remove('-translate-y-full')
modalCl.remove('scale-150')
}, 100);
} else {
modalCl.add('-translate-y-full')
setTimeout(() => {
modalCl.add('opacity-0')
modalCl.add('scale-150')
}, 100);
setTimeout(() => overlayCl.classList.add('hidden'), 300);
}
}
openModal(true)
</script>
You can get my code without the script tag here: https://codesandbox.io/s/tailwind-css-and-react-forked-6funy?file=/src/App.js
So I'm not going to write the code for you, because I don't think that will benefit you in the long run. But you're going to need to make a Modal Component. I would also recommend you have a read about State in React. I'll post a link for you to look at. After reading it you should have a better understanding of what you need to do to implement a Modal in React.
I would strongly recommend searching the web and learning Imperative vs Declarative Programming, useState and useEffect hooks.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.