2

I want to have a visitor click on a menu item and have the page popup in an iframe/div centered in the page like the image shown (I used Google as an example).

I've looked into iframe but they seem finicky. What is best practice here? Appreciate the help!

enter image description here

  • Is it for your own site? Or a 3rd party site? If external, you can try using the `sandbox` parameter which may prevent some issues, (for example frame busting code), but no guarantees it will function exactly the same as if rendered in a new window - ``. – dana Mar 19 '17 at 03:57
  • Ironically, Google is an example that won't work -- they use the X-Frame-Options HTTP header to prevent their site from being displayed in a frame. (The `sandbox` attribute does not bypass this.) –  Mar 19 '17 at 05:36
  • It will be external pages. And I wondered if google had some weird thing about it. It wasn't working when I plugged it into existing test codes. –  Mar 20 '17 at 00:48

3 Answers3

0

For popups, you should use window.open with the third parameter, strWindowFeatures. Then, you would calculate the size of the window and do math to find the exact left and top positioning. After all, this is Javascript, and you do have access to window.innerWidth and stuff like that!

The formula for calculating the window position is: 
{
    left: pageWidth - popupWidth / 2,
    top: pageHeight - popupHeight / 2,
}

Hope this helped you!

MasterBob
  • 550
  • 1
  • 8
  • 19
0

There's not really any alternative to iframe if you want embedded webpages, but you could utilize AJAX to script a dynamic page when the tab is clicked. See Better alternative to an iframe? for more information

Community
  • 1
  • 1
Eoin Fitzpatrick
  • 28
  • 1
  • 6
0

You can do this with Bootstrap modal windows.

Greg Raven
  • 1
  • 2