is there a package to show posts singularly on an overlay like Fb or IG do when you click a pic?

Published 1 month ago by chriz74

If you go to Fb or IG when you click on a picture in the desktop version the post will be shown on a semi transparent overlay (I think) div with the pic itself and a box on the right for description and comments etc. Does anyone know how to technically fo that or if there's a package than can create this kind of layout on the fly?

rivory_g

Hello,

Yes you can use Bootstrap to do that :

https://getbootstrap.com/docs/4.1/components/modal/

Laravel's package.json file includes the bootstrap package to help you get started >prototyping your application's frontend using Bootstrap.

Or feel free to look at google some modals libraries which are going to ask you less code in some way to arrive to the result you want.

chriz74

Thanks however I don’t think they are using modals on IG or FB, check it with dev tools. FB is a bit of a mistery to me as it seems it’s adding an empty div as the background and then the post stuff will be on a different div. on Instagram instead what happens is they add a div with all the content and then remove it from the dom after you close it.

chriz74
Cronix
Cronix
1 month ago (647,500 XP)

It's basically just simple css using z-index to stack things on top of each other.

Like base html is z-index: 1, transparent overlay is z-index:2 (default hidden), images/divs using z-index:3 (default hidden), etc. It's also how a modal basically works, and overlays. They really kinda are the same thing as far as how they work.

chriz74

@Cronix what do you think is better practice: put the div in the page as hidden and then show it on click or put it in the dom through javascript after click and then remove it?

jlrdw
jlrdw
1 month ago (237,650 XP)

That is like saying half a dozen of one and six of the other. Either way works.

I use display:none and display:block when needed.

Me personally I like having the division there but the display none.

rivory_g

I think it's depending of your use case.

If you have one single image on a page. Then simplest is to hide and show on click.

If you have several image on a page. Then you need some javascipt to at least use always the same div that you are going to update at each on click and display and hide.

If you have different content types on the same page and the user may never click the images you could use the facebook behaviour ;

You set the element to the dom with javascript when the first time an image is clicked. Then when the image is closed you just hide the div. If you need to show an another image just update this div and display it back etc...

newbie360

Please sign in or create an account to participate in this conversation.