How to Make Simple Popup Box in HTML CSS | Modal Using JavaScript

Published: 27 February 2024
on channel: FrontendDUDE

Make a simple but best popup box using html css and javascript. This popup can also be said as modal but concept is similar.

------------------------------------------------------------------------------------------------------------------

SVG CODE: (use the angled brackets around svg and path)
svg
class="close-icon"
onclick="closeModel()"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512"
id="IconChangeColor"
height="20"
width="20"

path
d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
id="mainIconPathAttribute"
path
svg

--------------------------------------------------------------------------------------------------------------------

#htmlandcsstutorialforbeginners #csstricks #frontenddevelopment

TIMESTAMPS
0:00 Preview
0:15 HTML Part
2:10 CSS Style
8:30 JavaScript
9:48 Main Preview

😉ABOUT MY CHANNEL
This channel shares Frontend tips and tutorials, around HTML5, CSS3 & JavaScript.
Most of these videos are mainly focused on web development and web designing.

✅Consider subscribing channel to keep learning new things and to grow your frontend skills.
Good Day❤❤

🎈Check out channel here:
   / frontenddude
Don’t forget to subscribe!

CHECK OUT MY OTHER VIDEOS

✅Align Image and Text Properly;
   • How to Align Image and Text Side by S...

✅Spinner loading Animation only CSS;
   • How to Make Spinning Loader with HTML...

✅Stretch Button on Hover;
   • Best Button Hover Animation CSS | Str...

👋 CONNECT WITH ME

  / dudefrontend

Watch video How to Make Simple Popup Box in HTML CSS | Modal Using JavaScript online without registration, duration hours minute second in high quality. This video was added by user FrontendDUDE 27 February 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 90 once and liked it 4 people.

354