# What's the best way to add a modal on top of scene

**URL:** <https://forum.babylonjs.com/t/whats-the-best-way-to-add-a-modal-on-top-of-scene/16773>\
**Category:** Questions\
**Created:** [December 19, 2020, 9:58am UTC](https://forum.babylonjs.com/t/whats-the-best-way-to-add-a-modal-on-top-of-scene/16773 "2020-12-19T09:58:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![javismiles](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/javismiles/32/12924_2.png) [@javismiles](https://forum.babylonjs.com/u/javismiles)\
**Post date:** [December 19, 2020, 9:58am UTC](https://forum.babylonjs.com/t/whats-the-best-way-to-add-a-modal-on-top-of-scene/16773/1 "2020-12-19T09:58:54Z")

</div>

Good day, I am trying to do that when people click on a button in the scene, a modal opens up on top of the scene containing some text and information,

I could add react-bootstrap for example and use its modals, but ideally I would love to avoid using one of these heavy css frameworks,

is there a way with babylon GUI to build such modal, that includes text and links inside? what’s the best recommended way to do that, or if the recommended way is to use a css framework then let me know if possible and will take that route, thank you 🙂

thank you 🙂

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [December 19, 2020, 4:16pm UTC](https://forum.babylonjs.com/t/whats-the-best-way-to-add-a-modal-on-top-of-scene/16773/2 "2020-12-19T16:16:30Z")

</div>

You could either use the GUI : [The Babylon GUI | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui) (please dig in the doc as you ll find all you need there)

But the limitations will be accessibility, some styling who are not as extensive as CSS.

Doing manually in HTML CSS JS without framework should be straightforward enough.

---

<div class="post-metadata">

**Author:** ![javismiles](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/javismiles/32/12924_2.png) [@javismiles](https://forum.babylonjs.com/u/javismiles)\
**Post date:** [December 19, 2020, 5:27pm UTC](https://forum.babylonjs.com/t/whats-the-best-way-to-add-a-modal-on-top-of-scene/16773/3 "2020-12-19T17:27:55Z")

</div>

thank you, I think I will try then to just use plain css

---

<div class="post-metadata">

**Author:** ![IncCorp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inccorp/32/23146_2.png) [@IncCorp](https://forum.babylonjs.com/u/IncCorp)\
**Post date:** [March 29, 2022, 9:16pm UTC](https://forum.babylonjs.com/t/whats-the-best-way-to-add-a-modal-on-top-of-scene/16773/4 "2022-03-29T21:16:24Z")

</div>

Found this. Not exactly Babylon GUI usage does the job do. Babylon Press created a modal example

> **[Click on 3D Model Opens Modal Window with Specific Wordpress Post - BabylonPress](https://babylonpress.org/resources/utilities/click-on-3d-model-opens-modal-window-with-specific-wordpress-post/)**
>
> Est. reading time: 1 minute

Found they made a version in HTML and reproduce it

> **[Modal Loader](https://codebeautify.org/htmlviewer/y22fae4ea)**
>
> Modal that pops up when clicking on an element