I found the modals a fab way of keeping pages tidy and when writing about DnD games they allow me to hide the hints. i found some examples, and created a page with three modals, with which I had some problems which now seem nearly fixed. I will/might use the technique to hide the motions in “Energy, Climate Change and Just Transition”. Anyway, here are my notes and links which were amended in March 2023. …

Using scripts and event listeners.

The first set of hints on solving the multi-modal problem I found in a bookmark at  Multiple modals on one page … by Aleksandr Hovhannisyan. I found this hard to read because my Javascript is so poor. And so I had a play with hide/display which I document on my Buttons page but I now have a javascript repo on github, which contains two scripts, one for buttons and one for multiple modals.

I posted to stackexchange and received a reply. It seems I can create a daemon that listens for events, or I can tie a script to the button event within the button object. There is also a difference between declaring and invoking a script. My answer involves creating a script, showmodal which establishes event listeners for a button, a code snip and a close object and then running it for each modal object set. I now have a javascript repo on github, I need to remind myself how to invoke it.

Examples

There follows some examples,  which were derived from work on a simpler and without a theme, see http://mom.deptford.red/2022/04/07/modals/ and it also works on http://test.davelevy.info/modals. This implies that it is a css error, or possibly a browser feature.

The following examples are based on recovered the code snips. See also, using modals on this site on my wordpress test site. Further testing proved that it was not possible to have two control modes for the same button. I deleted the code that implemented the tied script, which hard codes the button and modal name into the script. .

Example generation 2.1 – multiple modals

This was copied from mom.deptford.red…, this is a two modal test with inline event listener scripts

Event listener with arguments, on both buttons; the “close object” needs to be uniquely named.

The 2nd Button, strangely




And no 1



The original implementation

I did this work in four, now five stages, the original implementation which uses a tightly bound script yet will only work for one modal in a page. This is based on the code described at how to css/js modals at w3schools.com. I implemented the CSS in the theme CSS files. For wordpress, the script (and button if using the onclick argument) has to be held in a custom field or now, in 2023, a Custom HTML block, or be implemented as an external css file, foe more see this comments . I tag the pages that use modals in a comment. I found this technique did not work if a second or third modal was required, but It is still implemented at Energy, climate change and just transition.

Dave software, Technology , , , ,

5 Replies

  1. I have been working on this for the last two days and now have a version working, see my modals on my test site.

    This page originally had a second modal but I can’t get the second one to work, and deleted it, I wonder if it’s a script name clash, the example code has no name and so is not tied to each model. See Creating-multiple-modals-on-a-single-page on stack overflow.

    I now have code that works as a multi-address function, but it only works on the second click and with separately classed widgets or at least the close widget needs a unique name. Stack exchange has a number of pages, each with separate coding solutions. It looks like either, I am assigning the button twice, or that the start state is indeterminate, here is another one of the stack exchange posts. I made a stack exchange post.

    I posted to stackexchange and received a reply. I describe the positive in the main article, but it seems I can create a daemon that listens for events, or I can tie a script to the button event within the button object. There is also a difference between declaring and invoking a script.

    The answer involves creating a script, showmodal which establishes event listeners for a button, a code snip and a close object and then running it for each modal object set.

  2. In 2022, I came to the conclusion that I may also need an external stylesheet, which would have the syntax,

    <link rel=”stylesheet” href=”mystyle.css type=text/css”>

    but may only be used in the part of the document. CSS specific to a page should be encapsulated in

    tags although they may use the import statement. See Linking Style Sheets to HTML., from htmlhelp. In 2023, the Gutenberg Editor introduced “Custom HTML:” block types which makes Inline STYLE comments easy to implement. I shall be tranfering to this technique.

  3. This seems to be working although the modals do not display until you rack them up and down. As a result, I have moved this comment,

    There was an error when implementing the new theme and the guttenberg block editor, but I have recovered the code snips. See also, using modals on this site on my wordpress test site. Further testing proved that it was not possible to have two control modes for the same button and so I deleted the code that implemented the tied script, which hard codes the button and modal name into the script.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.