Resources

//INPUT: Buttons
//OUTPUT: Changing text styles
//INPUT: Text

The assignment

Use HTML to create a modals with buttons
Use CSS to style and position the modal
Include functions to display and hide the modal
Use onclick javascript to make the buttons able to trigger functions

Saving your work

This is an optional assignment!

Use Save as... to save the empty template as "2.03X-Modals-LastName.html" in your Computer Programming 12 directory.

What is a modal?

A modal is like a pop-up box in your webpage that displays or gathers information.

It works like this:

Buy me stuff!

Give me yr moneys for teh catfood!

$

Click OK to pay using BitCoin!

Break it down!

To make a modal, you need the following things:

Make a modal container
Put stuff inside it
Hide the container
Make a button that can trigger the modal
Create a display function
Link the display function to the button
Create a hide function
Link the hide function to the button

Now in more detail:

Make a modal container -
Let's use a <div> with an id so we can mess with it.
In this example, we are going to use:
```
<div id="modalId"></div>
```
Put stuff inside it -
Put stuff inside #modalId that you want to display.
I am going to have things like a heading, some text, and a close button.
The close button will be like this:
```
<input id="inputId" type="text">
```

Hide the container -
Use some CSS code inside your <style> that will start the page with #modalId hidden. We are also going to position #modalId on top of the rest of the page.
We are going to use this:

#modalId { 
	visibility:		hidden;		/* start hidden */
	border:			1px solid black;
	background-color:	pink;		
	width:			20%;
	position:		absolute;	/* set placement */
	top:			40%;
	left: 			40%;
}

Make a button that can trigger the modal -
A button that you can press to display the modal:
```
<button type="button" id="openId">Show a modal!</button>
```

Create a display function -
Write some Javascript code inside your <script> that will change the visibility of the modal.

//OUTPUT: this changes #modalId to make it appear and styled
var displayModal = function () {
	document.getElementById("modalId").style.visibility = "visible";
}

Link the display function to the button -
Write some JavaScript to trigger your display function when the button is clicked. Put it at the end of your <script>
```
//INPUT: trigger displayModal when #openId is clicked
document.getElementById("openId").onclick = displayModal;
```

Create a hide function -
Write some Javascript code inside your <script> that will make the modal disappear.

//OUTPUT: this changes #modalId to make it disappear
var hideModal = function () {
	document.getElementById("modalId").style.visibility = "hidden";
}

Link the hide function to the button -
Write some JavaScript to trigger your display function when the button is clicked. Put it at the end of your <script>
```
//INPUT: trigger hideModal when #closeID is clicked
document.getElementById("closeID").onclick = hideModal;
```