Modals

Modal boxes are a frequently utilized for login/register forms, advertisements, pop-outs of information, or just notifications to the user.

We're going to be creating a modal using HTML, CSS, and JavaScript.

Note: We are going to be hard coding the content of this modal, however, the text can be replaced with variables and messages that can change. Example: X has won this round! / O has won this round!

modal example

Setup

Starter code has been provided for you with all the files linked together.

  1. Fork and clone the repo https://git.generalassemb.ly/classwork/modal_practice
  2. Open the index.html, style.css and app.js in Visual Studio Code to follow along and create a modal.
  3. Open the index.html in your browser.

Exercise

Let's pretend that we are making the card game: Bridge. We want a modal to pop up to show information about the game.

  1. When a user clicks on the button About the Game, a modal will pop up to show them information about how to play the game.
  2. Once open, there will be a way to close the modal so that the user can see the main page again.

Add the HTML Elements

  1. Add a button that we will use to open the modal
<button id="openModal">About the Game</button>
  • give it the text About the Game
  • Add a div which will be the modal. Give an an id of modal so we can refer to it later.

<div id="modal"></div>

  1. Add the elements that will go inside the modal <div>:
  2. An anchor tag to close the modal with the text Close. Give it an id of close so we can reference it later. <a id="close" href="#">Close</a>
  3. A header tag for the modal's header with the text Learn to Play Bridge <h1>Learn to Play Bridge</h1>
  4. Three paragraphs with text inside the box. Feel free to use lorem ipsum text or, for more authentic text, take some from here: http://www.acbl.org/learn_page/how-to-play-bridge/
<p>
  Bridge is played with four people sitting at a card table using a standard
  deck of 52 cards (no jokers). The players across from each other form
  partnerships as North‑South and East‑West.
</p>
<p>
  Draw cards to select the person to deal the cards (the dealer). This person
  distributes the cards face down, in clockwise rotation one at a time, until
  each player at the table has a hand consisting of 13 cards.
</p>
<p>
  After the play of each deal is completed, the opportunity to deal moves around
  the table clockwise so that each person has a turn to deal out the cards.
</p>
  • Wrap the <a>, <h1>, and the three <p> in another div. Give this div an id of modal-textbox so we can refer to it later

:spades: HTML At This Point:

<button id="openModal">About the Game</button>
<div id="modal">
  <div id="modal-textbox">
    <a id="close" href="#">Close</a>
    <h1>Learn to Play Bridge</h1>
    <p>
      Bridge is played with four people sitting at a card table using a standard
      deck of 52 cards (no jokers). The players across from each other form
      partnerships as North‑South and East‑West.
    </p>
    <p>
      Draw cards to select the person to deal the cards (the dealer). This
      person distributes the cards face down, in clockwise rotation one at a
      time, until each player at the table has a hand consisting of 13 cards.
    </p>
    <p>
      After the play of each deal is completed, the opportunity to deal moves
      around the table clockwise so that each person has a turn to deal out the
      cards.
    </p>
  </div>
</div>

initial setup view

Style your Modal

Add some styling to our modal to set it apart when we press the About the Game button.

In the css sheet, give #modal some properties:

#modal {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  /*This puts our modal in front of the body (which has a default z-index setting of `0`*/
  overflow: auto;
  /*If overflow is clipped, a scroll-bar should be added to see the rest of the content*/
}

Style the Modal Text Box

#modal-textbox {
  background-color: white;
  height: 350px;
  width: 550px;
  border-radius: 2px;
}

height and width

Give the text box some margins so that it starts to center itself on the page and some depth so it stands out a little.

margin: 150px auto;
/*This will set the margins for the top and the bottom to 150px (or larger). The right and left will automatically set themselves (and keep the box centered horizontally).*/
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
/*This will give the box some depth.*/

:spades: CSS At This Point:

body {
  background-image: url("lets-play-bridge.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

#modal {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  overflow: auto;
}

#modal-textbox {
  background-color: white;
  height: 350px;
  width: 550px;
  border-radius: 2px;
  margin: 150px auto;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

box shadow

Hide the Modal

Now that the modal is styled, let's hide it.

  1. In the css file, on the #modal, add the following:
display: none;
/*Set this to `none` so that the modal does not show initially on page load.*/

We will change this dynamically by adding a display: block in our event handler that on the About the Game button in our javascript file.

display none

Hide and Show your Modal

  1. In your app.js file, grab the three pieces we'll need: About the Game button, the modal, and the close button. Write your code inside.
// Grabbing About the Game button
const openBtn = document.querySelector("#openModal");

// Grabbing modal element
const modal = document.querySelector("#modal");

// Grabbing close button
const closeBtn = document.querySelector("#close");
  1. Set an event listener on the About the Game button.
//Add event listener to About the Game button
openBtn.addEventListener("click", openModal);
  1. Create an event handler to display the modal. This needs to be placed above the listener.

For the modal to display, we need to change the style property of the modal's display to block;

// Event handler to open the modal
const openModal = () => {
  modal.style.display = 'block';
};
  1. Set an event listener on the close button.
//Add event listener to Close button
closeBtn.addEventListener("click", closeModal);
  1. Create an event handler to close the modal.

For the modal to close, we need to change the css property of the modal's display to none. This needs to be placed above the listener.

// Event handler to close the modal
const closeModal = () => {
  modal.style.display = 'none';
};

:elephant: Alternate Option: look up the jQuery method .hide()

We should now be able to open and close the modal with clicks to the associated buttons.

:spades: JavaScript At This Point:

  //Grabbing Elements
  // Grabbing About the Game button
  const openBtn = document.querySelector("#openModal");

  // Grabbing modal element
  const modal = document.querySelector("#modal");

  // Grabbing close button
  const closeBtn = document.querySelector("#close");

  //Event Handlers
  // Event handler to open the modal
  const openModal = () => {
    modal.style.display = 'block';
  };

  const closeModal = () => {
    modal.style.display = 'none';
  };

  //Event Listeners
  openBtn.addEventListener("click", openModal);

  closeBtn.addEventListener("click", closeModal);
 //

working modal

Automatically Have Modal Show

What if we wanted to have the modal automatically show after 5 seconds of someone visiting our page?

We could set something to automatically run our openModal function.

  1. Make a setTimeout for the modal to automatically pop-up after 5 seconds.
setTimeout(openModal, 5000);

Format the Information Inside the Modal

Reorganize the code in our Modal Text Box and format it to look a little nicer.

  1. Move the Close button to the bottom of the text box and wrap it in a div to make it easier to style. Give the <div> an id of modal-footer.
<div id="modal-footer">
<a id="close" href="#">Close</a>
</div>
  1. Give #modal-textbox some room to breath with some padding and a change in line height:
padding: 2%;
line-height: 120%;

nicer style

  1. Adjust the close button location. Select just the footer and let's move the close button to the right: text-align: right;
#modal-footer {
	text-align: right;
}
  1. Give the heading some room to breath. We can reference the <h1> tag because it is the only one in the html at this time.
h1 {
  padding-bottom: 15px;
}
  1. Update the font of the #modal-textbox to 'Arial'.

Give some style to the buttons

We have two buttons on our page. One uses a <button> tag and the other is an <a> tag.

  1. Adjust the close <a> to an <button> tag so that we can do the same styling to both, and give both <button> tags a class of "modal-buttons".
<button class="modal-buttons" id="openModal">About the Game</button>
<div id="modal-footer">
	<button class="modal-buttons" id="close" href="#">Close</button>
</div>
  1. In the css file:
.modal-buttons {
	padding: 14px 18px;
	background-color: #677996;
	border: none;
	outline: none;
	border-radius: 3px;
	color: white;
	font-family: 'Arial';
	cursor: pointer;
}

button change final

Additional Resources