Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ General Web Design _ Modal window
Posted by: Brian Chandler Aug 29 2021, 02:20 AM
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.
Posted by: CharlesEF Aug 29 2021, 08:16 PM
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.
Posted by: Brian Chandler Aug 30 2021, 04:01 AM
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.
Posted by: CharlesEF Aug 30 2021, 01:32 PM
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:
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.
Posted by: CharlesEF Aug 31 2021, 02:28 PM
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
[attachmentid=3422]
Posted by: CharlesEF Aug 31 2021, 03:21 PM
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.
Posted by: CharlesEF Aug 31 2021, 05:08 PM
One thing I forgot to include. You must pass the query string to the child page. Change the iframe to this:
In the child page you can use this to get the query string values:
{
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
Posted by: Brian Chandler Sep 2 2021, 10:47 AM
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.
Posted by: CharlesEF Sep 2 2021, 02:01 PM
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
Posted by: Christian J Sep 2 2021, 03:31 PM
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/iframe-embed-object.html#the-iframe-element
Posted by: CharlesEF Sep 2 2021, 10:45 PM
Not to mention the billions? of web sites that use iframes for ads. I suspect this web site has an iframe for ads also.
Posted by: Brian Chandler Sep 3 2021, 02:25 AM
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...
Posted by: Brian Chandler Sep 9 2021, 11:30 PM
To CharlesEF in particular, but would welcome some css expertise...
You said
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?
Posted by: CharlesEF Sep 10 2021, 03:22 AM
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.
Posted by: Christian J Sep 10 2021, 10:45 AM
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).
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?
Posted by: pandy Sep 10 2021, 06:45 PM
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.
Posted by: Brian Chandler Sep 11 2021, 02:39 AM
Can't understand your comment - is this misplaced from another thread?
Posted by: Brian Chandler Sep 18 2021, 11:28 AM
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=N10226+N03AC33&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
Posted by: Christian J Sep 19 2021, 12:55 PM
Well, I have this working now - see https://imaginatorium.com/totoro.html?bskt=N10226+N03AC33&dest=uk
The background around the modal could perhaps be a little darker, if nothing else because most other sites are.
The above modal text should be understandable, but could still be a little confusing (or I'm just nitpicking). How about something like:
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.)
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).
I recall most webshops deal with shopping basket contents on one page, destination and shipping cost on another, and payment methods on a third.
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?
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).
Posted by: Brian Chandler Sep 20 2021, 11:53 PM
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...)
Posted by: Brian Chandler Sep 21 2021, 01:55 AM
About the menu libraries and suchlike... I thought, ah, I'll look at the dropdown menus on this very page. For some reason only on the first post in a thread there are "Options" and "Rating" buttons, with a "V" indicating a dropdown menu. But when I look at the source, I see none of the expected "onlick' handlers, just a link to #topicoptions (or similar). How does that work, then?
Posted by: Christian J Sep 21 2021, 08:22 AM
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.
I didn't understand how these old URLs were created in the first place. I guess there are two scenarios:
1. The user expects to see the list of articles (maybe from bookmarking some wishlist or similar?). Then all he needs is a short reminder/confirmation if he still want to keep them.
2. The user has no idea what those articles are, or why you ask about them. Then it might seem like you're trying to sneak unwanted articles into the user's shopping basket (isn't it usually called "shopping cart", BTW?), so maybe an explanation of the modal could help.
I was thinking of the hand cursor (same as on links) to indicate that the arrows are clickable. Generic form buttons do use the arrow cursor by default, but in this case the Quantity buttons don't look like generic form elements. Nothing important.
Posted by: Christian J Sep 21 2021, 08:26 AM
About the menu libraries and suchlike... I thought, ah, I'll look at the dropdown menus on this very page. For some reason only on the first post in a thread there are "Options" and "Rating" buttons, with a "V" indicating a dropdown menu. But when I look at the source, I see none of the expected "onlick' handlers, just a link to #topicoptions (or similar). How does that work, then?
No idea, I guess it's an external javascript.
Posted by: Hassanali2020 Jun 13 2022, 09:16 PM
Hello i need help please because I’m not expert in html I want make dropdown list will be website for used car and i want when the customer want put his car for sale choose from drop down list as
his name
phone number
Address
Brand car
model
year
kilometers
Automatic or manual
Submit
Anyone could help me please
Posted by: Christian J Jun 14 2022, 04:39 AM
Hello i need help please because I’m not expert in html I want make dropdown list will be website for used car and i want when the customer want put his car for sale choose from drop down list as
his name
phone number
Address
Brand car
model
year
kilometers
Automatic or manual
Submit
Anyone could help me please
I created a new thread here: https://forums.htmlhelp.com/index.php?showtopic=61059&st=0&#entry143749
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)