Vanilla JavaScript Modal - With CSS display

Create a modal with JavaScript and the help of the CSS display property. Often, you use third-party libraries like jQuery or Bootstrap to do this but as you'll see, it's actually not hard to do it with vanilla JavaScript and a little bit of CSS.

----------

----------

• And you should of course also follow @academind_real.

See you in the videos!

----------

[kamaboko]

As expected, another great video. For those wanting the CSS, I pasted it below.


/* General styles */

* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

body,
html {
height: 100%;
}

body {
font-family: sans-serif;
margin: 0;
}

/* Container for Modal Control + Mondal Control */

.demo-container {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

.modal-control {
padding: 1rem;
border: 1px solid #521751;
text-align: center;
}

button{
font: inherit;
background: transparent;
border: 2px solid #521751;
padding: 0.5rem 1rem;
color: #521751;
cursor: pointer;
font-weight: bold;
}

button:hover,
button:active{
border-color: #fa923f;
color: #fa923f;
}



/* The Modal */

.modal {
display: none;
position: fixed;
z-index: 200;
top: 40%;
left: 40%;
width: 20%;
background: white;
-webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, .4);
box-shadow: 1px 1px 6px rgba(0, 0, 0, .4);
padding: 1rem;
}

.modal h1{
color: 521751;
margin: 0.5rem 0;
font-size: 1.2rem;
}

.modal-input{
margin: 0.5rem 0;
}

.modal-input textarea {
width: 100%;
font: inherit;
resize: none;
}

.modal-input textarea:focus{
outline: none;
background: #ffdbfe;
border-color: #521751
}



button.btn-cancel:hover,
button.btn-cancel:active{
color: white;
background: red;
}

button.btn-confirm{
border-color: green;
color: green;
}


.modal-actions{
text-align: right;
}

button.btn-cancel{
border-color: red;
color: red;
}

button.btn-confirm:hover,
button.btn-confirm:active{
color: white;
background: green;
}


button.btn-comfirm:active{
color: white;
background: green;
}

.backdrop {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, .5);
z-index: 100;
}

.open {
display: block;
}

[cybergenK]

Just curious, if you have full control of the HTML, why would you target the button at 5:02 using the array index, would it not be better practice to give it a class or an ID?

[impzeropvp]

You can use the "defer" attribute for the script tag. This will make sure your HTML is rendered and then load your javascript.

[sreejiths]

Thank you, this was what I've been searching for.

[nirelmarieibarra]

Vielen dank, Max! Ich habe viel gelernt!

[gerdtf]

was looking for that all day long. super clean and simple code.

[raymondmichael]

I love it!!!, it even have a part two.
Thanks Max

[princehamza]

I am your fan, you are an extra ordinary teacher

[fach-digital]

Great Tutorial and awesome concept. Danke Max. Freue mich auf Video Nr. 2

[maxnaiir]

Thanx max and manu, cool video and you guys make some cool thumbail arts. which tool are you using for that ?

[VladShapiroCS]

"querySelectorAll" returns a node list, not a real Array, it might be problematic in some cases, so you'll need to convert it to a real Array.

[sathishpothuri]

Sir can you create a video about working search box

[MuhammadAdnan-gxrd]

Amazing real example please teach this vanilla. ...

[ijasdeen]

Even the creator of Js may not know as you know.... (just loved it bro ) <3

[Oswee]

Would it not be better to use <template> and cloneNode for modal in 2018? As well defer to load scripts. Also - Z-index issues will accure i think. So i would say that this is really really beginners lesson. It is not production ready example.