# Tutorial for Adding a Modal Popup on Icon Click

**URL:** <https://community.weweb.io/t/tutorial-for-adding-a-modal-popup-on-icon-click/5221>\
**Category:** How do I?\
**Tags:** design\
**Created:** [November 5, 2023, 9:07am UTC](https://community.weweb.io/t/tutorial-for-adding-a-modal-popup-on-icon-click/5221 "2023-11-05T09:07:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hismo](https://avatars.discourse-cdn.com/v4/letter/h/8e7dd6/32.png) [@Hismo](https://community.weweb.io/u/Hismo)\
**Post date:** [November 5, 2023, 9:07am UTC](https://community.weweb.io/t/tutorial-for-adding-a-modal-popup-on-icon-click/5221/1 "2023-11-05T09:07:16Z")

</div>

Hello everyone, I’m brand new to Weweb and feeling a bit confused… I’m struggling to add a modal… This modal should pop up when I click on an icon located within a card. Additionally, I’d like it to disappear when I click on a button inside the popup…

I’ve tried to create a workflow on the icon, but nothing seems to work. Is there a comprehensive, step-by-step tutorial for creating a modal that can be displayed and hidden? Or could someone explain this, which would be very helpful for future individuals in the same situation.

Thank you in advance.

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [November 5, 2023, 1:33pm UTC](https://community.weweb.io/t/tutorial-for-adding-a-modal-popup-on-icon-click/5221/2 "2023-11-05T13:33:43Z")

</div>

Have you added a modal from the add panel to your page?

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/51fe698d2e5bcdfbf3841345a27f906cccf43302.png)

Then you select the icon

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9f6e231d72a27a0be75f5cfa623b9ad07e8f92e9.png)

And change the variable modalOpened to true in your workflow

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7ad8e8a5465fd12f9c4437aacfc0710cd4cf193f.png)

---

<div class="post-metadata">

**Author:** ![Hismo](https://avatars.discourse-cdn.com/v4/letter/h/8e7dd6/32.png) [@Hismo](https://community.weweb.io/u/Hismo)\
**Post date:** [November 5, 2023, 1:56pm UTC](https://community.weweb.io/t/tutorial-for-adding-a-modal-popup-on-icon-click/5221/3 "2023-11-05T13:56:17Z")

</div>

I was fooled by tutorials that touch modals with variables in JS… In reality, it’s simpler lol

THANK YOU SO MUCH