Creating a Modal in Javascript
While creating my PetMe project I was looking for a way to easiest create a pop-up window which will allow users to know they entered an incorrect password or username. I was stuck. I tried to use an alert but I couldn’t find a way to customize it as I wanted to. I finally went to a Meet-up where an amazing hero came to the rescue. She introduced me to a Modal.
A modal is customizable to accomplish any of you pop-up needs on your app.It is a dialog/interactive box that sits on a current page. It is built with CSS, HTML, and Javascript. I will go step by step to show how I created a modal using all these tools including bootstrap(no shame in a little design help!). If you are more creative than me you can opt out of using bootstrap and I will make note of it below.
I will begin to explain the process of how I made my modal which is displayed below.
I wanted a pop-up window to display getting an incorrect password. My first plan of attack, with the angel dropped from heaven, was to start with the CSS.
.modal{
height: 317px;
width: 313px;
position: fixed;
left: 39%;
z-index: 200;
display: none;
justify-content: center;
align-items: center;
}The above code has a class name of modal that I can later use to show the modal where I want it to. The key for this css to show the modal is by the display. The display as you can see above is none but when a user enters an incorrect password it should then change to flex. I created a named function that I can later call in the event I would want the modal to show.
const showModal = () => {
document.getElementsByClassName("modal")[0].style.display = "flex"
}First you look at the document get the element by class name change the style display to flex. The event I want this to happen is only when a user has the incorrect password or username so I call it in my fetch call.
export const gettingUser = (userInfo) => {
return (dispatch) => {
fetch("http://localhost:3000/api/v1/login", {
method: "POST",
headers: {
"content-type": "application/json",
Accepts: "application/json"
},
body: JSON.stringify({ user: userInfo })
})
.then(resp => (resp.ok ?
resp.json().then(userData => {dispatch(loginUser(userData),
localStorage.setItem("token", userData.jwt))})
:
resp.json().then(userData => showModal())
))
}
}Now I forgot to mention a key function of the modal. It should be a child of the highest point of your app or the highest point of where you want this modal to appear. Since my login page is one of the first pages I want a user to see it has to be a child of where the highest point of my app is that is my index.
ReactDOM.render(<Provider store={store}> <BrowserRouter> <Modal /><App /> </BrowserRouter></Provider>This block of code is in my Index.js file where all the magic happens. Before this I also created a Modal class.
import React from 'react';class Modal extends React.Component {render(){
return(<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Sorry Try Again!<span role="img" aria-label="emoji">❤️</span></h2>
</div>
<div class="modal-body">
<p>Your username or password is incorrect.</p>
</div>
<div class="modal-footer">
<button type="button" onClick={this.modalOff} class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
)
}
}export default Modal
The body of this modal is where I added the bootstrap code and what you can adjust to what you would like. As you can see my modal is similar to the one at the top of this page because of this block of code.
The last step to this master plan was to add functionality to my modal to make sure a user can take the modal off the page if they click on the close button. to do that I had to go back again and create a named function where I can change the display back to none.
modalOff = () => {
document.getElementsByClassName("modal")[0].style.display = "none"
}This function above is again added to the event where I want the user to be able to close it which is in the button.
<button type="button" onClick={this.modalOff} class="btn btn-secondary" data-dismiss="modal">Close</button>This is all happening inside of the modal class and the ending product of the code is this.
import React from 'react';class Modal extends React.Component {modalOff = () => {
document.getElementsByClassName("modal")[0].style.display = "none"
}render(){
return(<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Sorry Try Again!<span role="img" aria-label="emoji">❤️</span></h2>
</div>
<div class="modal-body">
<p>Your username or password is incorrect.</p>
</div>
<div class="modal-footer">
<button type="button" onClick={this.modalOff} class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
)
}
}export default Modal
The modal will always be on the page until there is an event that triggers it. I am pretty sure there are plenty of other ways you can go about creating a modal but this is mine. I hope you I explained how to create a modal and you can create yours too!
