×

My opinions…

NOTES

This web page is about adding multiple modals easily.

Modals should provide concise (small snippets) information of importance regarding what’s being viewed on the page. If you need to provide more information you must consider whether a new page might be more suitable.

Additionally, will your modals be viewed on a mobile device? Consider the small screen (real estate) available to deliver your information and given compatibility issues and technical considerations about where on the page your modal button appears? Again, it might be prudent to deliver your information as a new website page rather than a modal.

×

jQuery…

STEP 1

Add the latest jQuery version in the <head> of your HTML page.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of May 2019, jQuery is used by 73% of the 10 million most popular websites.

×

Javascript…

STEP 2 (Buttons)

Add the following onClick event to your buttons.


onclick="show('pum1')"

You’ll notice the variable ‘pum1’. I’ve chosen pum (Pop Up Modal) you can use any javascript compliant variable you wish.

Each new button should have a unique variable assigned to it.

You might like to add the variable ‘pum2’ to the next button and then ‘pum3’ to the following button, and so on.

×

HTML…

STEP 3 (Modal)

Basic modal code


<!-- The Modal -->
<div id="myModal" class="modal">

  
  <div class="modal-content cbg">
    <span class="close">&times;</span>
    <p>Your text in the Modal…</p>
  </div>

</div>

This is the standard HTML modal box code.

Notice ‘×’ which creates the ‘X’ for the close button on the modal

×

Javascript…

STEP 4

Add our Javascript onClick events to our modal and change the modal’s ID to match.


<!-- The Modal -->
<div id="pum1" class="modal" onclick="if(event.target==pum1){hide('pum1');}">

  
  <div class="modal-content cbg">
    <span class="close" onclick="hide('pum1')">&times;</span>
    <p>Your text in the Modal…</p>
  </div>

</div>

Change the modal’s ID tag to match the variable we’ve chosen. The ID is what we’re referencing in the javascript.

Notice there are two onClick events. One for the modal and one for the ‘close’ button.

Remember to change the FOUR instances of the variable ‘pum1’ with each new modal you create.

×

CSS…

STEP 5 (CSS)

Now add the visual styling of your pop up modals inside the <head> of your document.


	<style>
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 

	</style>

×

Magic…

STEP 6 (Javascript)

Now add this javascript to the bottom of your HTML document just before the close body tag (</body>).


<script>
function show(nodename) {
	document.getElementById(nodename).style.display='block';
	document.getElementById(nodename).style.zIndex=3;
}

function hide(nodename) {
	document.getElementById(nodename).style.display='none';
	document.getElementById(nodename).style.zIndex=0;
}

</script>

Include the following code in your css style…


.modal-header {
  padding: 2px 16px;
  background-color: dodgerblue;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: dodgerblue;
  color: white;
}

Then add your header, body & footer classes to your modal. Voilà


  <div class="modal-content cbg">
   <div class="modal-header">
      <span class="close" onclick="hide('pum1')">&:times;</span>
      <h2>DirectFX websites</h2>
    </div>
    <div class="modal-body">
      <p>One of the best website design companies in the world!</p>
    </div>
    <div class="modal-footer">
      <p style="font-size:1em;text-align:right;">Contact <a href="#">Your Name</a> </p>
    </div> 
  </div>

Remember to change your “pum1” variable.

×

WRONG

WRONG!

This modal is an example to watch out for! If you scroll the modal the whole window scrolls revealing the extent of the “Click Off” area of the modal. This makes it, not only unavailable but also unsightly. If you click the next pop-up button you will see that the “modal” scrolls so that it keeps it’s “click off” area within view.
I’ll provide the CSS code fix in the next “pop-up” along with the preferred “RIGHT” version.

Color Name	Hex Code	Decimal Code
IndianRed	CD5C5C	205,92,92
LightCoral	F08080	240,128,128
Salmon	FA8072	250,128,114
DarkSalmon	E9967A	233,150,122
LightSalmon	FFA07A	255,160,122
Crimson	DC143C	220,20,60
Red	FF0000	255,0,0
FireBrick	B22222	178,34,34
DarkRed	8B0000	139,0,0
Pink	FFC0CB	255,192,203
LightPink	FFB6C1	255,182,193
HotPink	FF69B4	255,105,180
DeepPink	FF1493	255,20,147
MediumVioletRed	C71585	199,21,133
PaleVioletRed	DB7093	219,112,147
Coral	FF7F50	255,127,80
Tomato	FF6347	255,99,71
OrangeRed	FF4500	255,69,0
DarkOrange	FF8C00	255,140,0
Orange	FFA500	255,165,0
Gold	FFD700	255,215,0
Yellow	FFFF00	255,255,0
LightYellow	FFFFE0	255,255,224
LemonChiffon	FFFACD	255,250,205
LightGoldenrodYellow	FAFAD2	250,250,210
PapayaWhip	FFEFD5	255,239,213
Moccasin	FFE4B5	255,228,181
PeachPuff	FFDAB9	255,218,185
PaleGoldenrod	EEE8AA	238,232,170
Khaki	F0E68C	240,230,140
DarkKhaki	BDB76B	189,183,107
Lavender	E6E6FA	230,230,250
Thistle	D8BFD8	216,191,216
Plum	DDA0DD	221,160,221
Violet	EE82EE	238,130,238
Orchid	DA70D6	218,112,214
Fuchsia	FF00FF	255,0,255
Magenta	FF00FF	255,0,255
MediumOrchid	BA55D3	186,85,211
MediumPurple	9370DB	147,112,219
BlueViolet	8A2BE2	138,43,226
DarkViolet	9400D3	148,0,211
DarkOrchid	9932CC	153,50,204
DarkMagenta	8B008B	139,0,139
Purple	800080	128,0,128
RebeccaPurple	663399	102,51,153
Indigo	4B0082	75,0,130
MediumSlateBlue	7B68EE	123,104,238
SlateBlue	6A5ACD	106,90,205
DarkSlateBlue	483D8B	72,61,139
GreenYellow	ADFF2F	173,255,47
Chartreuse	7FFF00	127,255,0
LawnGreen	7CFC00	124,252,0
Lime	00FF00	0,255,0
LimeGreen	32CD32	50,205,50
PaleGreen	98FB98	152,251,152
LightGreen	90EE90	144,238,144
MediumSpringGreen	00FA9A	0,250,154
SpringGreen	00FF7F	0,255,127
MediumSeaGreen	3CB371	60,179,113
SeaGreen	2E8B57	46,139,87
ForestGreen	228B22	34,139,34
Green	008000	0,128,0
DarkGreen	006400	0,100,0
YellowGreen	9ACD32	154,205,50
OliveDrab	6B8E23	107,142,35
Olive	808000	128,128,0
DarkOliveGreen	556B2F	85,107,47
MediumAquamarine	66CDAA	102,205,170
DarkSeaGreen	8FBC8F	143,188,143
LightSeaGreen	20B2AA	32,178,170
DarkCyan	008B8B	0,139,139
Teal	008080	0,128,128
Aqua	00FFFF	0,255,255
Cyan	00FFFF	0,255,255
LightCyan	E0FFFF	224,255,255
PaleTurquoise	AFEEEE	175,238,238
Aquamarine	7FFFD4	127,255,212
Turquoise	40E0D0	64,224,208
MediumTurquoise	48D1CC	72,209,204
DarkTurquoise	00CED1	0,206,209
CadetBlue	5F9EA0	95,158,160
SteelBlue	4682B4	70,130,180
LightSteelBlue	B0C4DE	176,196,222
PowderBlue	B0E0E6	176,224,230
LightBlue	ADD8E6	173,216,230
SkyBlue	87CEEB	135,206,235
LightSkyBlue	87CEFA	135,206,250
DeepSkyBlue	00BFFF	0,191,255
DodgerBlue	1E90FF	30,144,255
CornflowerBlue	6495ED	100,149,237
RoyalBlue	4169E1	65,105,225
Blue	0000FF	0,0,255
MediumBlue	0000CD	0,0,205
DarkBlue	00008B	0,0,139
Navy	000080	0,0,128
MidnightBlue	191970	25,25,112
Cornsilk	FFF8DC	255,248,220
BlanchedAlmond	FFEBCD	255,235,205
Bisque	FFE4C4	255,228,196
NavajoWhite	FFDEAD	255,222,173
Wheat	F5DEB3	245,222,179
BurlyWood	DEB887	222,184,135
Tan	D2B48C	210,180,140
RosyBrown	BC8F8F	188,143,143
SandyBrown	F4A460	244,164,96
Goldenrod	DAA520	218,165,32
DarkGoldenrod	B8860B	184,134,11
Peru	CD853F	205,133,63
Chocolate	D2691E	210,105,30
SaddleBrown	8B4513	139,69,19
Sienna	A0522D	160,82,45
Brown	A52A2A	165,42,42
Maroon	800000	128,0,0
White	FFFFFF	255,255,255
Snow	FFFAFA	255,250,250
Honeydew	F0FFF0	240,255,240
MintCream	F5FFFA	245,255,250
Azure	F0FFFF	240,255,255
AliceBlue	F0F8FF	240,248,255
GhostWhite	F8F8FF	248,248,255
WhiteSmoke	F5F5F5	245,245,245
Seashell	FFF5EE	255,245,238
Beige	F5F5DC	245,245,220
OldLace	FDF5E6	253,245,230
FloralWhite	FFFAF0	255,250,240
Ivory	FFFFF0	255,255,240
AntiqueWhite	FAEBD7	250,235,215
Linen	FAF0E6	250,240,230
LavenderBlush	FFF0F5	255,240,245
MistyRose	FFE4E1	255,228,225
Gainsboro	DCDCDC	220,220,220
LightGray	D3D3D3	211,211,211
LightGrey	D3D3D3	211,211,211
Silver	C0C0C0	192,192,192
DarkGray	A9A9A9	169,169,169
DarkGrey	A9A9A9	169,169,169
Gray	808080	128,128,128
Grey	808080	128,128,128
DimGray	696969	105,105,105
DimGrey	696969	105,105,105
LightSlateGray	778899	119,136,153
LightSlateGrey	778899	119,136,153
SlateGray	708090	112,128,144
SlateGrey	708090	112,128,144
DarkSlateGray	2F4F4F	47,79,79
DarkSlateGrey	2F4F4F	47,79,79
Black	000000	0,0,0

×

RIGHT

RIGHT!

Now when you scroll the modal scrolls thus keeping the “click off” within view all the time through the length of the modal content.

NOTE:In my opinion a modal pop-up should be viewable within your viewport and not bleeding off the bottom of the page. Therefore, the following additional CSS achieves this by setting the vertical height of the modal-content to a percentage of the vertical height of the viewport encountered. In this case 80%

Append the following two lines to your “modal-content” CSS.


  overflow:auto;
  max-height:80vh;

Color Name	Hex Code	Decimal Code
IndianRed	CD5C5C	205,92,92
LightCoral	F08080	240,128,128
Salmon	FA8072	250,128,114
DarkSalmon	E9967A	233,150,122
LightSalmon	FFA07A	255,160,122
Crimson	DC143C	220,20,60
Red	FF0000	255,0,0
FireBrick	B22222	178,34,34
DarkRed	8B0000	139,0,0
Pink	FFC0CB	255,192,203
LightPink	FFB6C1	255,182,193
HotPink	FF69B4	255,105,180
DeepPink	FF1493	255,20,147
MediumVioletRed	C71585	199,21,133
PaleVioletRed	DB7093	219,112,147
Coral	FF7F50	255,127,80
Tomato	FF6347	255,99,71
OrangeRed	FF4500	255,69,0
DarkOrange	FF8C00	255,140,0
Orange	FFA500	255,165,0
Gold	FFD700	255,215,0
Yellow	FFFF00	255,255,0
LightYellow	FFFFE0	255,255,224
LemonChiffon	FFFACD	255,250,205
LightGoldenrodYellow	FAFAD2	250,250,210
PapayaWhip	FFEFD5	255,239,213
Moccasin	FFE4B5	255,228,181
PeachPuff	FFDAB9	255,218,185
PaleGoldenrod	EEE8AA	238,232,170
Khaki	F0E68C	240,230,140
DarkKhaki	BDB76B	189,183,107
Lavender	E6E6FA	230,230,250
Thistle	D8BFD8	216,191,216
Plum	DDA0DD	221,160,221
Violet	EE82EE	238,130,238
Orchid	DA70D6	218,112,214
Fuchsia	FF00FF	255,0,255
Magenta	FF00FF	255,0,255
MediumOrchid	BA55D3	186,85,211
MediumPurple	9370DB	147,112,219
BlueViolet	8A2BE2	138,43,226
DarkViolet	9400D3	148,0,211
DarkOrchid	9932CC	153,50,204
DarkMagenta	8B008B	139,0,139
Purple	800080	128,0,128
RebeccaPurple	663399	102,51,153
Indigo	4B0082	75,0,130
MediumSlateBlue	7B68EE	123,104,238
SlateBlue	6A5ACD	106,90,205
DarkSlateBlue	483D8B	72,61,139
GreenYellow	ADFF2F	173,255,47
Chartreuse	7FFF00	127,255,0
LawnGreen	7CFC00	124,252,0
Lime	00FF00	0,255,0
LimeGreen	32CD32	50,205,50
PaleGreen	98FB98	152,251,152
LightGreen	90EE90	144,238,144
MediumSpringGreen	00FA9A	0,250,154
SpringGreen	00FF7F	0,255,127
MediumSeaGreen	3CB371	60,179,113
SeaGreen	2E8B57	46,139,87
ForestGreen	228B22	34,139,34
Green	008000	0,128,0
DarkGreen	006400	0,100,0
YellowGreen	9ACD32	154,205,50
OliveDrab	6B8E23	107,142,35
Olive	808000	128,128,0
DarkOliveGreen	556B2F	85,107,47
MediumAquamarine	66CDAA	102,205,170
DarkSeaGreen	8FBC8F	143,188,143
LightSeaGreen	20B2AA	32,178,170
DarkCyan	008B8B	0,139,139
Teal	008080	0,128,128
Aqua	00FFFF	0,255,255
Cyan	00FFFF	0,255,255
LightCyan	E0FFFF	224,255,255
PaleTurquoise	AFEEEE	175,238,238
Aquamarine	7FFFD4	127,255,212
Turquoise	40E0D0	64,224,208
MediumTurquoise	48D1CC	72,209,204
DarkTurquoise	00CED1	0,206,209
CadetBlue	5F9EA0	95,158,160
SteelBlue	4682B4	70,130,180
LightSteelBlue	B0C4DE	176,196,222
PowderBlue	B0E0E6	176,224,230
LightBlue	ADD8E6	173,216,230
SkyBlue	87CEEB	135,206,235
LightSkyBlue	87CEFA	135,206,250
DeepSkyBlue	00BFFF	0,191,255
DodgerBlue	1E90FF	30,144,255
CornflowerBlue	6495ED	100,149,237
RoyalBlue	4169E1	65,105,225
Blue	0000FF	0,0,255
MediumBlue	0000CD	0,0,205
DarkBlue	00008B	0,0,139
Navy	000080	0,0,128
MidnightBlue	191970	25,25,112
Cornsilk	FFF8DC	255,248,220
BlanchedAlmond	FFEBCD	255,235,205
Bisque	FFE4C4	255,228,196
NavajoWhite	FFDEAD	255,222,173
Wheat	F5DEB3	245,222,179
BurlyWood	DEB887	222,184,135
Tan	D2B48C	210,180,140
RosyBrown	BC8F8F	188,143,143
SandyBrown	F4A460	244,164,96
Goldenrod	DAA520	218,165,32
DarkGoldenrod	B8860B	184,134,11
Peru	CD853F	205,133,63
Chocolate	D2691E	210,105,30
SaddleBrown	8B4513	139,69,19
Sienna	A0522D	160,82,45
Brown	A52A2A	165,42,42
Maroon	800000	128,0,0
White	FFFFFF	255,255,255
Snow	FFFAFA	255,250,250
Honeydew	F0FFF0	240,255,240
MintCream	F5FFFA	245,255,250
Azure	F0FFFF	240,255,255
AliceBlue	F0F8FF	240,248,255
GhostWhite	F8F8FF	248,248,255
WhiteSmoke	F5F5F5	245,245,245
Seashell	FFF5EE	255,245,238
Beige	F5F5DC	245,245,220
OldLace	FDF5E6	253,245,230
FloralWhite	FFFAF0	255,250,240
Ivory	FFFFF0	255,255,240
AntiqueWhite	FAEBD7	250,235,215
Linen	FAF0E6	250,240,230
LavenderBlush	FFF0F5	255,240,245
MistyRose	FFE4E1	255,228,225
Gainsboro	DCDCDC	220,220,220
LightGray	D3D3D3	211,211,211
LightGrey	D3D3D3	211,211,211
Silver	C0C0C0	192,192,192
DarkGray	A9A9A9	169,169,169
DarkGrey	A9A9A9	169,169,169
Gray	808080	128,128,128
Grey	808080	128,128,128
DimGray	696969	105,105,105
DimGrey	696969	105,105,105
LightSlateGray	778899	119,136,153
LightSlateGrey	778899	119,136,153
SlateGray	708090	112,128,144
SlateGrey	708090	112,128,144
DarkSlateGray	2F4F4F	47,79,79
DarkSlateGrey	2F4F4F	47,79,79
Black	000000	0,0,0

POP ’EM LIKE THEY’RE HOT

How to add multiple modals on one page!

POP ’EM LIKE THEY’RE HOT

How to add multiple modals on one page!

My opinions…

NOTES

jQuery…

STEP 1

Javascript…

STEP 2 (Buttons)

HTML…

STEP 3 (Modal)

Javascript…

STEP 4

CSS…

STEP 5 (CSS)

Magic…

STEP 6 (Javascript)

SAMPLE…

SAMPLE CODE

Question…

Who does this refer to?

Answer!

Sports Utility Vehicle buyers!

Disturbing aspect of the psychology of SUV buyers.

BBC RADIO

BUBBLE WRAP!

WHO DOESN’T LIKE BUBBLE WRAP?

You can’t have too many swans!

Background image on the modal.

jQuery

Animated content made with GSAP & JQUERY

Feedback loop

Feedback

Please discuss modals here or just let me know if this web page has been useful to you? Thank You.

Top & Tail

Add a “header” and “footer” to your modals?

Creativity

Unsplash

WRONG

WRONG!

RIGHT

RIGHT!

Subliminal

HTML e-mails

Quiz…

General Knowledge Quiz

Finalé…

Final thoughts

EMP T

Animated content made with
GSAP & JQUERY

Please discuss modals here or just let me know if this
web page has been useful to you? Thank You.