A hidden tick box does the opening and closing, so this survives the strict filters in most LMS and CRM platforms. Paste the code straight into the page. There is nothing to host anywhere, not even here.
Buttons and highlights
Every modal gets its own name so several on one page never
interfere. Tick this only if you want to regenerate it — for instance if you
pasted the same code twice by mistake.
Wording
What the button and the pop-up say.
Basic HTML tags are allowed here. The title and button
labels are plain text and are escaped for you.
Preview
Paste this into your platform’s source or HTML view, the </> button in most editors. Pasted into the normal typing view it shows as text instead.
How this works
This is the only tool here that needs no hosting from anybody. The others put the
widget page on a server and pack your content into a link; this one gives you a block
of HTML and CSS that is the whole thing. Paste it into a pathway activity,
a SharePoint page or a Canvas page and it works on its own, forever, whether or not any
of our servers are still running.
It manages that by using no JavaScript at all. A checkbox that you cannot see holds
the open or closed state, and CSS shows the dialog while that checkbox is ticked. The
trigger and the close buttons are labels pointing at it.
Several modals on one page
Every modal you generate gets its own randomly named identity, and every class name
inside it carries that name too. That is what stops two modals in the same activity from
opening each other — a real problem with the shared class names this tool used to
emit, where clicking the first trigger opened every modal on the page at once.
So you can build as many as you like and paste them all into one activity. Just
generate each one separately rather than copying the same block twice and editing the
text, which would give both the same identity.
What it cannot do
Being pure CSS has limits worth knowing before you use one for something important:
The Escape key will not close it. That needs JavaScript. The close button,
the corner cross and clicking the background all work.
Focus is not trapped inside the dialog. Someone tabbing through the page
will eventually tab out of the open dialog and into the page behind it.
A screen reader announces the trigger as a checkbox, not a button, because
that is what it really is underneath.
It is keyboard operable — you can tab to the trigger and press Space —
which the earlier version of this tool was not, because it hid the checkbox with
display: none and that takes it out of the tab order
entirely. For a tip or an aside a modal is fine. For anything a student must read to
continue, put the content on the page instead of behind a click.
Worth knowing
The dialog covers the whole window when open, not just the area the
activity occupies.
Your body text can contain HTML — bold, links, lists. The title and
the button labels are treated as plain text, so an apostrophe or an ampersand in them
cannot break the markup.
The button text colour is chosen for you, black or white, whichever stays
readable on the colour you picked.
Nothing is stored and nothing is tracked. This page builds the code in your
browser and never sends it anywhere.