Home/ Questions/Q 8005351
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T17:12:19+00:00

So, I am developing the first serious web site. I want to implement the

  • 0

So, I am developing the first serious web site. I want to implement the following scenario, but I need guidance and advice. There is a button <input type="submit"> on my web page. When the user clicks it, I want it to open some HTML content which will be shown on top of all page content (and positioned centrally, but I don’t care about that detail at the moment). It should act very similar to the way the photos are viewed on Facebook. When the user clicks the photo thumbnail, the photo opens on top of and across all page content.

Now, I’ve implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.

I would very much appreciate if someone would like to share the standard methods used to achieve this effect and opinions . I am guessing that AJAX and jQuery should be used heavily for this (I used pure JavaScript in my design described previously). I am looking for some code samples and resources. Thank you so much.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you are looking for is a modal dialog and not a pop-up. Pop-ups are new windows, while modals are HTML elements that block the page behind it for emphasis on forward content.

    One way is to have a <div> appended to the body, usually to the end of the body and have it positioned absolute. That div will have top, bottom, left and right zero to stretch to fit the viewport. Within that div is another div that is also positioned absolute, relative to the parent, viewport-fitting div. Positioning is up to you, but usually it’s centered using a formula:

    center = (total length - modal length)/2

    Content is up to you. You can have the content already loaded and hidden in the DOM which you can just display later. Or load the content via AJAX if you wish.

    jQuery already has a modal plugin in the jQueryUI suite which you can use that packs a lot of methods to add and customize.

    • 0