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

Опубликовано: 27 Февраль 2024
на канале: FrontendDUDE
90
4

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