popup window, modal or other?

[mlegg]

I was asked by a friend to redo his website for him. On this page or references (http://www.pscompetitiveedge.com/references.html) a popup window opens, when you click on one of the logos, with an image with the reference letter.

The old site was html 4 and now I have it almost all set and ready to have him use in html5 responsive. What is the best option for me to use? and to make sure that it's also going to be mobile ready?

This is in the header now

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=675,height=465,left = 110,top = 45');");
}
// End -->
</script>

this is the html code for each logo

<a href="javascript:popUp('ltrs/isleta.htm')"><img src="photos/logo/isleta.jpg" alt="Isleta Casino & Resort" width="229" height="75" border=0></a>

http://www.pscompetitiveedge.com/ltrs/isleta.htm is where the image reference letter is located for the popup window.

[molendijk]

On a mobile device, a popup window will show in a new tab, whereas the look of a modal window (iframe) will be identical to its look on a desktop (if you do it the right way).
Take a look at this (Dutch) site (http://wierdenland.nl/#page1.html). When you click on 'agenda' or any other button at the bottom, you will see a modal window (desktop and mobile device). When you click on 'terpen en wierden' (text-link, top left of the page), you will see a popup window (desktop) or a new tab (mobile device).
From the perspective of responsiveness, there's hardly a solid criterion in favor of one of both possibilities.

[mlegg]

Leaving it the way it is will obviously save me a lot of time.
thanks

[molendijk]

You may want to read this (http://mesdomaines.nu/eendracht/window_open_of_tab_allerbest2/pop_it_up.html). There's also a popup-script.

[Beverleyh]

On a mobile device, a popup window will show in a new tabthats if they open at all. Sadly the way you are currently generating the popups do not work in touch devices. I've only tested on iPhone but all you get (even when you know where to tap) is a momentary highlight but then nothing happens -- not via short tap or either via a long hold where you'd usually get the prompt to open in a new tab.

Popups like this are unfortunately not friends of mobile. The safest bet would be to simply open the file via a standard link to the image or to another web page. Alternatively, you can play around with this image popup modal to see if that works in your situation. http://fofwebdesign.co.uk/template/_testing/modal-popup.htm
The image will resize but is zoomable to some degree (though probably not enough to make a scanned letter big enough to read) but you might be able to get a reasonable result of you edit/remove background:cover; for the popup img in the CSS

Arie, as for you Iframe popup script on mobile/iPhone, the way it behaves is that the first tap does nothing, except for the momentary highlight, so then I tap it again and that closes the whole window (completely closing your site). Maybe you can take a look at it for an alternative method on touch devices?

[Beverleyh]

Just wondering Arie - is the Dutch site you linked to still in production? It's just that I can't get any of the links/buttons/menus to work in iPhone or iPad (haven't tested in anything else). I tap them and nothing happens. If I long hold the "agenda" link (which is overlapping text BTW) I get a prompt to save the image. Unfortunately the page doesn't scroll either (up/down or sideways). Here's a screen capture so you can see http://fofwebdesign.co.uk/template/_testing/test/arie-dutch-site.jpg

[molendijk]

Beverleyh, that's odd, everything works well on my ASUS-tablet. Would a refresh solve the problem on your devices?

[molendijk]

Just wondering Arie - is the Dutch site you linked to still in production? It's just that I can't get any of the links/buttons/menus to work in iPhone or iPad (haven't tested in anything else). I tap them and nothing happens. If I long hold the "agenda" link (which is overlapping text BTW) I get a prompt to save the image. Unfortunately the page doesn't scroll either (up/down or sideways). Here's a screen capture so you can see http://fofwebdesign.co.uk/template/_testing/test/arie-dutch-site.jpg
Beverleyh, this afternoon I went to a shop where they sell iPhones, iPads, tablets, desktops and much more just to test the site (which is still in production, yes). Everything seemed to work fine on all devices. So I'm amazed to hear that the links/buttons/menus don't work on your devices. (Sometimes I had to make the screen a little bit wider in order for the links to work).

[Beverleyh]

Sorry Arie but the links/buttons/menu just refuse to work for me. I've tried on two iPhones and an iPad, using Chrome, Mercury and Dolphin browsers :(

[mlegg]

Arie the page works for me with Chrome on my Samsung Galaxy S4 phone. When I click on the link it give me a window that says
the page at wiederland.nl says:th windoe you are abiut to open doesn't hav back and forward but you can use the keyboard:
-press the BACKSPACE button or ALT + left arrow for going back in the newly opened window.

[Beverleyh]

Just checking that you saw this mlegg. It probably wasn't clear that I was replying to you (your current popups aren't working for me on iOS)


thats if they open at all. Sadly the way you are currently generating the popups do not work in touch devices. I've only tested on iPhone but all you get (even when you know where to tap) is a momentary highlight but then nothing happens -- not via short tap or either via a long hold where you'd usually get the prompt to open in a new tab.

Popups like this are unfortunately not friends of mobile. The safest bet would be to simply open the file via a standard link to the image or to another web page. Alternatively, you can play around with this image popup modal to see if that works in your situation. http://fofwebdesign.co.uk/template/_testing/modal-popup.htm
The image will resize but is zoomable to some degree (though probably not enough to make a scanned letter big enough to read) but you might be able to get a reasonable result of you edit/remove background:cover; for the popup img in the CSS

[mlegg]

OH, I didn't realize that. I def need to get the code to work for iOS too. I'll play around with the page later and come back if I need more help.