Modal window Options

[Brian Chandler]

Looking for advice on the best way to do this.

Background: my old checkout worked by passing GET parameters around - 'bskt' for a list of product codes and 'dest' for the destination country. The new one uses cookies, which is better, because you do not need to make sure you do everything in the same tab. But for various reasons a URL to the new site may include these get parameters, in which case I want to add the product codes to the user's basket, but ask first.

So I need to display a "flash panel" with a warning "You are adding these puzzles ... (thumbnails etc) to the basket. OK?" and a Yes/No response to be handled by Javascript.

I want it to look as "standard" as possible - most sites grey out the page in the background, for example. So hints on where to start would be appreciated.

[CharlesEF]

Why the word 'Modal' in the title? As I see it you don't need a modal.

When the page is loading you check for the GET value. If found have your server code inject a line into the onload event of the page. The injected line is nothing more than a function call. The function should use the JS prompt command to get a response from the user. If the user accepts then update your cookie.

I guess you could use a modal if you want.

[Brian Chandler]

Well, I wrote "modal" in the title, then I went off to check if that was really what I meant. Reading the Wikipedia article convinced me that I am a bit confused about it all, but also that I am not the only one.

Anyway, the code to accept and update the cookie is the easy bit. As I remember, a JS yes/no prompt box only allows you to insert plain text, but I want to show thumbnails and descriptions, so I want to show a box maybe 60% of the linear dimensions of the screen. That's probably the simple bit, but I don't know where to start.

[CharlesEF]

Ok, then how about this:

Define a div section in the HTML that is hidden by default. Inside this div you place your information along with a Yes and No button. If GET is found while loading then the server code can set the div to show. Something like this:

CODE

<div class="<?php isset(GET["variable"] ? "show" : "hide">">...</div>

. You could use the style attribute instead of the class. After the user selects a button then you hide the div again.

Depending on where this code is to be used will decide how to implement this. I mean, is this code going to run in different pages? If yes, then maybe you should set it up as a include file. Or you could use a modal dialog. A model dialog means that you can't set the focus anywhere except the dialog/fields inside. If you open a dialog on top of your web page and can't access the web page itself then the dialog is modal. If you do want to use a modal then you can write the code in a separate file/page and display it in an iframe.

This post has been edited by CharlesEF: Aug 30 2021, 01:36 PM

[CharlesEF]

I put together a sample of using a modal dialog in a iframe. Load parent.php with and without the query string 'parm=1'. I didn't do anything fancy but you should get the idea. If you need any more help just post back. You need the transpBlack50.png image, so maybe you need to save it?
 parent.php ( 1.37k ) Number of downloads: 523
 child.php ( 511bytes ) Number of downloads: 540


This post has been edited by CharlesEF: Aug 31 2021, 02:35 PM

[CharlesEF]

You can get the PNG image from here: http://www.cef-inc.com/public/downloads/transpBlack50.png
Right click the image and select 'Save Image As' and place it in the same folder as the other 2 .php files.

[CharlesEF]

One thing I forgot to include. You must pass the query string to the child page. Change the iframe to this:

CODE

  <iframe id="modal" class="iframe" src="child.php<?php echo(isset($_GET) ? "?" . http_build_query($_GET) : "");?>"></iframe>

In the child page you can use this to get the query string values:

CODE

function getQueryString()
{
let vars = new Object();
let parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value)
{
  vars[key] = decodeURI(value);
});
return vars;
}

function onLoad()
{
const queryStringArray = getQueryString();
alert(queryStringArray["joe"]);
alert(queryStringArray["jack"]);
alert(queryStringArray["charles"]);
}

It doesn't have to be in the onload event like I have shown. You could place them in a 'script' block in the 'head' section. You will get 'undefined' if you try to access a non-existent query string name.


Hope this help,

Charles

[Brian Chandler]

Thanks for the help (I hope you didn't type much of that just for me).

Anyway, I'm trying to see the real advantage in using either just an html div in front (I understand the z-direction, but if I have not set any so far, do I just assume that z=1000 will be in front of everything else?) or an iframe. An iframe sounds more fiddly, and iframes are sort of frames, which I thought had generally died out... ?

Are you saying that in this context "modal" means an iframe, because it is essentially impossible for the user to ignore it? This distinction would seem moot, since this is not a user irritant, it's asking to confirm something - if the user really wants to ignore it and click something on the page underneath, that's fine.

[CharlesEF]

If you use a div then you don't have to worry about z-index. The high z-index for the iframe makes sure the iframe is on top of everything else. If you want to disable a section (not allow user action) use a negative z-index.

While some say iframes are dead, I don't agree. I've used iframes for years in my code. I use it to load other pages while not leaving the current page. Let say you are creating an invoice. You get to the customer or shipping method and it's not in the dropdown selection then you can select "Add or Edit". The page will open in an iframe and allow the user to add, edit or delete. When you exit the iframe and go back to the dropdown then you see your changes. This does require a little extra programming because of the iframe. That's because there might be 3-8 dropdowns on a page and they all use the same ifrmae. If you use an ifrmae you don't have to worry about any extra programming.

Any dialog that can't lose focus is modal. My example code is a faux modal. Browsers don't have a method for creating modal dialogs (IE does, at least use to).


Hope this helps,

Charles

This post has been edited by CharlesEF: Sep 2 2021, 02:14 PM

[Christian J]

iframes are sort of frames, which I thought had generally died out... ?

While some say iframes are dead, I don't agree. I've used iframes for years in my code.

Framesets are removed from the spec, but IFRAMEs are developed more: https://html.spec.whatwg.org/multipage/ifra...-iframe-element

[CharlesEF]

Not to mention the billions? of web sites that use iframes for ads. I suspect this web site has an iframe for ads also.

[Brian Chandler]

Thanks Charles for the bit about iframes. I can't see any point in the example I asked about, but for back-of-shop admin pages there are times when I want to go off and run some other program precisely because of missing info. An iframe would lessen the chances that I just forget what I was doing...

[Brian Chandler]

To CharlesEF in particular, but would welcome some css expertise...

You said

If you use a div then you don't have to worry about z-index. The high z-index for the iframe makes sure the iframe is on top of everything else.

I deduce from the stuff on w3schools that the default z value is 0, and positive means "in front". So I understand the iframe settings.

But I do not really understand why I don't need to worry about this in other cases. Suppose I put the html for the "popup window" (can I use that to mean something I display in front of the normal website page) at the end of the page. I need to be sure it will be in front, so perhaps it is safest to add a z-index of 100 or whatever. But then I started wondering: all "normally displayed" content functions the obvious way: the background of a TD is "in front" of the background of the enclosing TABLE, so there is no need to even think about z. But when I have something with "position:fixed", for example, how do I know what it is going to be in front of? Specifically, if you look at this page, the basket is an orange panel in the top right corner. But if you click "Add to basket" on a puzzle (sorry: test version, other buttons may not work), the basket then "sticks" on the screen even when you scroll...

https://imaginatorium.com/teppei.html

Is it a good/bad idea to put a z-index value (200? 2000? 20000? 200000?) on this DIV#cust, and if not why not?

[CharlesEF]

Well, I'm not a CSS wizard but I would think no, you don't have to worry about it. I say this because I think the browsers default CSS will take care of the 'position: fixed' settings.

Maybe someone else who knows CSS better than I will jump in.

[Christian J]

But when I have something with "position:fixed", for example, how do I know what it is going to be in front of? Specifically, if you look at this page, the basket is an orange panel in the top right corner. But if you click "Add to basket" on a puzzle (sorry: test version, other buttons may not work), the basket then "sticks" on the screen even when you scroll...

https://imaginatorium.com/teppei.html

Generally speaking, positioning places the element in front of all non-positioned elements by default, so I don't think you need any z-index for this.

If you have several positioned elements they will be placed in front of each other, in the order they appear in the HTML (child in front of parent, sibling in front of previous sibling).

Is it a good/bad idea to put a z-index value (200? 2000? 20000? 200000?) on this DIV#cust, and if not why not?

Using a very high value could be another way of saying "this one should always be at the front".

Another reason people use very high z-index values could be to reserve a numeric range, in case they later want to add more elements with intermediate values, but I think it would be extremely rare to need a larger range than say 10?

[pandy]

Yup. That one comes out as mush. But with the tool I found and when just saving from IE as Website Complete. Can be fixed, I assume, but probably a lot of work since you don't know HTML.

[Brian Chandler]

Yup. That one comes out as mush. But with the tool I found and when just saving from IE as Website Complete. Can be fixed, I assume, but probably a lot of work since you don't know HTML.

Can't understand your comment - is this misplaced from another thread?

This post has been edited by Brian Chandler: Sep 11 2021, 02:40 AM

[Brian Chandler]

Why the word 'Modal' in the title? As I see it you don't need a modal.

When the page is loading you check for the GET value. If found have your server code inject a line into the onload event of the page. The injected line is nothing more than a function call. The function should use the JS prompt command to get a response from the user. If the user accepts then update your cookie.

I guess you could use a modal if you want.

Well, I have this working now - see https://imaginatorium.com/totoro.html?bskt=...C33&dest=uk

(Still a work in progress, but most of it should work now)

FWIW, it seems to me that if the definition of "modal" is "You can't do anything else until you dismiss this box", then this is modal, because the 50% background stops you clicking anywhere else.

I would be grateful for comments; the basket now lets you change quantities, and recalculate on the fly. The destination setting is not finished yet, but I would also be grateful for suggestions about design. Basically in the vast majority of cases, once you have set your country as destination, which should be guess 1, since I get it from the IP address, you probably never need to change it. But sometimes people will need to. So there has to be a way to change it, which is not obtrusive... I am thinking of putting some sort of blob (my, how I hate those in general), like a 'V' arrow, to the right of "Destination: France", which pulls down a little menu: "Change / Clear". Does that seem like a good idea?

I have also met plenty of pull-down things which either do not work, or are extremely fiddly, because you have to move the mouse very very carefully. Is there a standard trick for doing this well? What seems obvious is:

Mouse over V button pops up panel including the position of the V
Click either menu button to do (just clear (or confirm?); popup panel for destination selection)
Mouse out from *panel* closes it.

TIA

[Christian J]

Well, I have this working now - see https://imaginatorium.com/totoro.html?bskt=...C33&dest=uk

The background around the modal could perhaps be a little darker, if nothing else because most other sites are.

CODE

You probably received this link from somewhere — it includes puzzles for the basket...

The above modal text should be understandable, but could still be a little confusing (or I'm just nitpicking). How about something like:

CODE

The link that brought you here comes from the old store, and contains the following articles. Would you like to keep them in your shopping basket? You can always make changes to the shopping basket later.

puzzle
puzzle
puzzle

Then I'd use large prominent buttons, one with text on the button itself like "Keep them" and the other "Remove".
(I wrote "articles" instead of "puzzles", in case you sell other things like frames, puzzle mats, etc.)

I would be grateful for comments; the basket now lets you change quantities

A "cursor: pointer" style for the Quantity arrows might be helpful for mouse users. Touch screen users may have trouble hitting the arrows, but they should still be able to hit the number field and then type a new number in it.

Each article in the shopping basket could link to its store page (opening a new window?), in case the user wants to check it again. A delete button for each article might be helpful too (setting the quantity to zero does the same thing, but could be unintuitive).

The destination setting is not finished yet, but I would also be grateful for suggestions about design. Basically in the vast majority of cases, once you have set your country as destination, which should be guess 1, since I get it from the IP address, you probably never need to change it. But sometimes people will need to.

I recall most webshops deal with shopping basket contents on one page, destination and shipping cost on another, and payment methods on a third.

I am thinking of putting some sort of blob (my, how I hate those in general), like a 'V' arrow, to the right of "Destination: France", which pulls down a little menu: "Change / Clear".

Maybe it's better to use directly visible button that say "Change" (which opens a modal window), why hide the button in a sub menu?

I have also met plenty of pull-down things which either do not work, or are extremely fiddly, because you have to move the mouse very very carefully. Is there a standard trick for doing this well? What seems obvious is:

Mouse over V button pops up panel including the position of the V
Click either menu button to do (just clear (or confirm?); popup panel for destination selection)
Mouse out from *panel* closes it.

Nowadays most sites use third-party script libraries for almost everything (see link in my signature for rant), maybe you could copy the design and behavior from them (or even use the actual library, but in that case perhaps host the files on your own server).

[Brian Chandler]

Thanks for looking at this Christian.

There is always a conflict between wanting to be explicit, and not wanting to be longwinded. I will simplify that wording, which as you suggest is clumsy, but the point is that it would not necessarily be from the old version of the shop.

The point about changing the destination is that it will only happen very occasionally in real operation, and "Change" has more letter in it than many country names. I don't want to clutter up more than absolutely necessary.

I'm not sure what you mean by '... "cursor: pointer" style for the Quantity arrows' - you mean a different cursor selection? FF here shows an arrow, as opposed to the I-beam when over text. Or do you mean "make the arrows more pointy"?? (I could do that; just change a few numbers... I did just add a hover setting...)