Open HTML modal on mesh click

About a year ago I made this example - Click on 3D Model Opens Modal Window with Specific Wordpress Post - BabylonPress
Since then I’ve had several requests to make it even simpler, in plain HTML page without extra stuff.
Here it is - Babylon.js HTML Modals
There is only one HTML file, so you can just copy-paste the code (Ctrl+U in Chrome to view source) and it will work.
The source code is heavily commented and consoled.

7 Likes

Nice one !!! GG

1 Like

Hey @labris thank you very much for this code. I used it here: Alex Furer - VirtueAlley™ - THE virtual gallery

The images are clickable and open in a modal for better view and ordering prints :slight_smile:

NOTE: the cursor is not actually where the crosshair is, so mind the distance of the mouse pointer to the crosshair when you click on the canvas, or you will be missing the image when you click.

Now the problem I have and I see you have the same issue on your first link form your above post.

The modal does not contain the content. It’s leaking out on the lower side of the modal.

Is there any remedy to this you could think off?

Thanks & Cheers - Alex

1 Like

Thanks labris, I luv it when people follow-up on their already good idea and make them even better.
Bookmarked for later use. :smiley:

1 Like

I believe it is CSS thing.
You may google, for example, “modal fit content”, there are a lot of different ways how to fit content to the modal.

1 Like

Thanks @labris!

I did search for that and found a lot of posts hinting to Bootstrap. So I tried to use Bootstrap, not the least because Bootstrap has img-responsive/img-fluid class that normally fixes those issues, but when I source Bootstrap BabylonJS does not render anything.

This is driving me nuts, as it is so basic html. I feel the solution floating there right in front of my nose.

What I find funny is that if I resize the browser window from a corner, the modal seems perfectly responsive. Just not if I only make the browser smaller in height, or it is smaller initially…

Will keep looking

The modal window on my example doesn’t use Bootstrap just for the simplicity. But you can implement Bootstrap modals, they have all needed CSS out of the box.
For your problem, I believe, you may try to use CSS media queries for different screen sizes.

1 Like

Hmmm… So far as soon as I load Bootstrap, I get a white page. I will investigate…

Media queries could indeed be a solution. Put image sizes depending on the screen width. Hmmm…

Would you think that implementing a lightbox library could be done without conflicting with BabaylonJS? (omg, shadowbox anyone :slight_smile: )

Thanks!

As far as I know there shouldn’t be any conflicts if implement it properly.
The same with Bootstrap - Modal · Bootstrap v5.1

1 Like