Create Custom Modal in React with Tailwind CSS | Modal in NextJS with Tailwind

hey guys welcome back to my YouTube channel today in this tutorial I am going to show you how we can create custom model in react.js with Delvin CSS so here as you can see we have three buttons for first button we have text model so let's click on it so after clicking here we can see we have the model it is a simple model with some text and we have a title and we have this close button and notice in the background all the contents are blurred so now we can click here to close this model beside this text model we have this video model so after clicking here here we can see we have a YouTube video on this model and here we can play the video right and as we can close this model by clicking on this cross button similarly we can close this model by clicking anywhere outside of this model and at last we have this form model this is also similar but here we have this form so this is what we are going to create today in this tutorial so if you are interested in these kinds of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification Bell icon so that you get notified whenever I post a new tutorial on this channel so without wasting any more time let's get started thank you so here I have opened a project directory in Visual Studio code and beside that I have the browser opened and here I have Tailwind CSS so first in this directory I am going to install the next JS project so for that I am going to this framework guide and this next chess I'm going to use if you are using react.js then also this tutorial will work for you because next.js is a framework of react.s so it is similar I prefer next yes that's why I'm going to use this one and here I am going to use this command and I'm going to use dot instead of the project name because I am already within the project directory so it has been installed now after that we need to install Tailwind so I'm going to use this command and after that I need to use this and along with this I am going to copy this one paste it here and for Global CSS this one after saving it now we can run the project by this command and let's open it here so here we can see our project right now let's create the basic interface of it so here I don't need this one and for the heading I am going to use create custom model in react.js with Telvin CSS and after that I am going to create a button for button text I will use white for the button background color I will use blue 700 for hover I will use BG blue 800 [Music] and for Focus I will use outline none for the font I will use Font white medium text size will be 14 pixel then I am going to use border radius for padding left and right I will use 20 pixel and for the top and bottom I will use 10 pixel and text will be Center within it for the merge in right I will use 20 pixel so our button has been created now let's copy this one two more times and here after text it will be video model and then it will be form model so this is our basic layout which have been created and let me provide a margin bottom here and now we are going to create our model component and for that here I am going to create a directory called components and within it I am going to create model Js and here let's first import that model here and here I am going to use react fragment so here we can see the model but this model needs to be on top of every content present in the page so for that here we need to provide some classes so first it will be fixed and then it needs to be top 0 bottom 0 left 0 right 0 that we can do by providing this in set 0 after that let's use a background color black then we are going to use the opacity so let's provide 25 and I'm going to use a background blur so that's why we need to use this backdrop blur and I'm going to use backdrop blur SM so this is how our background is looking right now and we are going to present our model at the center of the page so for that we need to use flex justify Center and item Center so it is at the center of the page now after that we need to create a div which will hold the actual mode model content so here let's provide with 600 pixel and within it we will provide our model so our model background will be white let's provide content here so this is how it will look so let's provide some padding and I will provide some border radius to it so now it's looking good but along with this model body I want to provide a close button here so that I can provide on top of this div so it will be a button and for this one I will provide white color text and the text size will be extra large and I will provide this X and I need to present this here so for that I am going to use flex property here and I'm going to use flex column so the direction of it will be Flex call and I'm going to place it at the right side so that's why I have provided Place self end now it has been positioned here and now to make this model open and close we need to have some props here so first we need to have this is visible and based on that if is visible not set then we will return null otherwise we will return this model so after setting this one you can see our model has been gone because we haven't set is visible here and here if we provide is visible then you can see the model has been present okay I want to change it to capital V so now we want to control this thing so that's why we need to create a state here so it will be show model and we can set it by set show model and we will need this u-stat Hook from react by default it will be set to false and when we will click here that time we will set it to true so let's do the on click function and for it we will set some model as true and here for is visible I am going to pass this show model State value now save this after saving let's click here so now we have created the functionality to present the model but now we don't have any way to close this one so let's Implement that for that here I am going to pass another prop called on close and here I am going to set show model as false and here we need to accept that and here for this x button for on click of this I am going to pass this function so now if we click here on this cross button then our model is closed right opening and closing functionality is working fine but still I want to do another thing if I want to click anywhere in this Blank Space where our model is not present after clicking on that section model will be closed but right now that is not happening so let's Implement that and that we can do just by providing on click and let's provide on close function here let's close the sidebar and here let's see here we can see that it is working perfectly fine but it is not perfect because when we click here that time also it is getting closed but we don't want that we want to interact with the model content so that's why we need to create a function called handle close and here for this div I am going to provide an ID called wrapper and we are going to check based on that so if event.target ID if the ID of that element is equal to wrapper then only we will close so to use this one we are going to use handle close instead of this on plus function so let's save this one and now let's see so click outside of the model it closed and now let's click inside of the model so here you can see that I am clicking but it is not getting closed so it's working perfectly well right now I want to make this model to have different children so instead of this model I am going to use this children prop so now we can pass any kind of content within this model and that will be present to our model so let's provide model title so here our model title is present so let me design the content here [Music] and I'm going to wrap this content with another div which will have this padding and after this I am going to provide some text content and let me copy paste that here so here I have added this text and here we can see this is how our model is showing now after this let's create model for other buttons as well and for that here I need to create more State and here I will provide model to model 3. and we are going to use those for these buttons so let me copy this code for the other buttons as well so for the video I am going to set show model 2 and for the form I am going to use show model 3. show here let me copy this model code and here we are going to use two and similarly I am going to copy it again for model 3. now let's click here so here it is our video model and here it is our form model and this is the text model so for the video model here I am going to use a video from my channel so let's go to my channel and here open any video and here we are going to embed it so let's copy this embed code and let's use that and for the width it will be 100 now save this one so after saving it here we can see our video model is ready and we can play the video from here right so our video model is ready and similarly for the form model also here we can present any content as we want so here I'm just going to provide a form created with Delvin CSS nothing special over there so that's why I am not going to show you how to create that form I am going to Simply copy paste those code here so here I have added that so here you can see this is the content which I have added and these are the Delvin CSS classes right so now save this one and now open this form model so here you can see our model is open and we have this beautiful form created with Telvin CSS so instead of this form you can provide any kind of content whatever you want as we have already done with this video and this text right so that's how you can create this model and now after that and also you can see that this is responsive and if it is not for your case as we have used the 600 pixel with here so you can use a breakpoint such as this MD and for this one let's use with 90 percent merge in Left Right Auto okay so here we need to provide this MD for this 600 pixel more than this black point it will be 600 pixel wide and less than this MD breakpoint we will have this 90 width okay so that's how we have made this responsive properly and that is how we can create our custom model in react.js or next.js by using Telvin CSS so this is the tutorial guys I hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and let me know by commenting down below if you have any kind of session for me then also let me know and don't forget to share this tutorial with your friends and colleagues and I will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 32,756

Keywords: custom modal in react js, custom modal in next js, next js modal component, custom modal in react js with tailwindcss, modal form in react js, modal tailwind css react, modal with tailwind css, pop up modal react, create a modal with react (popup), video modal in reactjs, simple modal in react, simple modal with tailwind css in react, simple modal with tailwind css in next js, custom modal with tailwind css in next js

Id: nwJK-jo91vA

Length: 15min 24sec (924 seconds)

Published: Thu Sep 15 2022