Lightbox pop up page??

Thanks for your help!

On my index.html, I have various different links. When the links are clicked I want a page that overlaps index.html that includes different content. Can this be done with lightbox? I have used it in the past to display larger images but I wasn't sure if it can be done with content.

Thanks

Ah, perfect! Yes, this can absolutely be done using a lightbox. You can either use a pre-existing plugin (such as Magnific Popup) and add your content as needed, or create one on your own using a little JavaScript.

The documentation for Magnific Popup (and other plugins) can be a little tricky when you're first starting out with it, but there are a plethora of examples that you can find using it that you should be able to tweak to fit your needs. Try, try again with this one, and you'll get it!

If you'd rather create your own, you could simply make your content sections and set them to display: none; as their default, then on click of your link, you would use JavaScript to cycle through the possible hidden sections until it found the right one (I usually do it based on a matching data attribute that I have set on both the link and the hidden content section), then set its value to display: block;, and of course having it set to something like position: absolute; or position: fixed; and giving it a higher z-index value than the main site. To keep in style with most lightboxes, you would probably give a semi-transparent overlay behind it, to really emphasize the lightbox, and to act as a means to close the lightbox (though you would also want to create an actual close button, for usability purposes).

Hope this helps! Let me know if you need further assistance! I can put together an example on CodePen and add the link here, if needed :)

Erik

Thanks for your help! Is there any chance you could put a lightbox example together for me on code pen? Would i be right in thinking that having hidden content on your website is bad SEO practice?

Absolutely; I will have something put together shortly and will provide the link here!

In the meantime, feel free to do some research online regarding modal windows and SEO. Ultimately, I don't think they negatively impact your SEO, but you may not get everything indexed as you wish. But, if these links need to display modals rather than simply going to new pages, that's what they need! It certainly wouldn't make or break your site, depending on what all you're wanting to put in the lightboxes.

You probably wouldn't want to have your site's entire contents living in modal windows, but if they're just little teasers, I would think it'd be fine. The other questions to ask at that point are:

1) What content will you have in these modals?

2) Why do you want the modals?

Erik

Thanks,

The reason behind having modal windows is to display my portfolio. So on index.html I will have images of the websites I've built then when clicked it will show in a lightbox with a brief description and a link to the website.

Ah, a wonderful use case for modal windows! That will be nice, indeed!

I'm working on the CodePen now, and will have it posted here for you to take a look at shortly.

Erik