Published 2 months 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?
Yes you can use Bootstrap to do that :
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.
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.
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.
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 ;