Posted by Dave on

Using modals on this site.

Using modals on this site.

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, which now seem to only display the 3rd. I would like to fix that as I think I will/might use the technique to hide the motions in “Energy, Climate Change and Just Transition”. Anyway, here are my notes and links

I did this work in four 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. It is still implemented at Energy, climate change and just transition. I list the pages that use modals in a comment. For wordpress, the script (and button if using the onclick argument) has to be held in a custom field, or be implemented as an external script. I now have a javascript repo on github. I have come to the conclusion that I may also need an external stylesheet, this has the syntax,

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

but may only be used in the <head></head> part of the document. CSS specific to a page should be encapsulated in <style></style> tags although they may use the import statement. See Linking Style Sheets to HTML., from htmlhelp.

I found this technique did not work if a second or third modal was required. The first set of hints on solving this 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. See Buttons.

Using scripts and event listeners

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.

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.

Examples

There follows some examples,  which currently do not work on this site/theme. I have tried it on a simpler theme, see http://mom.deptford.red/2022/04/07/modals/ and it works on http://test.davelevy.info/modals. which implies that it is a css error.


The following examples now fail completely in the tempo theme.


Here’s an example, originally from https://www.w3schools.com/howto/howto_css_modals.asp using custom fields, but should now be implemented using the enscripted event listeners.



 

Let’s try it



 


Comments ( 3 )

  1. ReplyAuthorDave
    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. ReplyAuthorDave
    This needs a second button installed.

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