{"id":6184,"date":"2022-01-16T14:48:27","date_gmt":"2022-01-16T14:48:27","guid":{"rendered":"https:\/\/davelevy.info\/wiki\/?p=6184"},"modified":"2023-03-26T20:50:59","modified_gmt":"2023-03-26T20:50:59","slug":"using-modals-on-this-site","status":"publish","type":"post","link":"https:\/\/davelevy.info\/wiki\/using-modals-on-this-site\/","title":{"rendered":"Using modals on this site."},"content":{"rendered":"\n<style>p {font-size: 120% !important;} button {width: 150px;<\/style>\n\n\n\n<p>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 href=\"https:\/\/davelevy.info\/wiki\/nwn2-the-harp-the-crysanthemum\/\">a page with three modals<\/a>, with which I had some problems which now seem nearly fixed. I will\/might use the technique to hide the motions in &#8220;Energy, Climate Change and Just Transition&#8221;. Anyway, here are my notes and links which were amended in March 2023. &#8230;<br><\/p>\n\n\n\n<!--more-->\n\n\n\n<h3 class=\"wp-block-heading\">Using scripts and event listeners.<\/h3>\n\n\n\n<p>The first set of hints on solving the multi-modal problem I found in a bookmark at&nbsp; <a href=\"https:\/\/web.archive.org\/web\/20220714181140\/https:\/\/dev.to\/aleksandrhovhannisyan\/multiple-modals-on-one-page-using-html-css-and-javascript-353b\">Multiple modals on one page &#8230;<\/a> by <a href=\"https:\/\/dev.to\/aleksandrhovhannisyan\">Aleksandr Hovhannisyan<\/a>. 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 <a href=\"https:\/\/davelevy.info\/wiki\/buttons\/\">Buttons<\/a> page but I now have a <a href=\"https:\/\/github.com\/dfl1955\/javascript\">javascript repo<\/a> on github, which contains two scripts, one for buttons and one for multiple modals. <\/p>\n\n\n\n<p>I <a rel=\"nofollow\" href=\"https:\/\/stackoverflow.com\/questions\/71766463\/two-modals-each-only-work-on-second-click-of-buttons\">posted <\/a>to stackexchange and received a reply. It seems I can create a daemon that <span style=\"text-decoration: underline;\">listens<\/span> 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, <code>showmodal<\/code> 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 <a href=\"https:\/\/github.com\/dfl1955\/javascript\">javascript repo<\/a> on github, I need to remind myself how to invoke it. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples<\/h3>\n\n\n\n<p>There follows some examples,&nbsp; which were derived from work on a simpler and without a theme, see <a href=\"http:\/\/mom.deptford.red\/2022\/04\/07\/modals\/\">http:\/\/mom.deptford.red\/2022\/04\/07\/modals\/<\/a>&nbsp;and it also works on <a href=\"http:\/\/test.davelevy.info\/modals\">http:\/\/test.davelevy.info\/modals<\/a>. This implies that it is a css error, or possibly a browser feature. <\/p>\n\n\n\n<p>The following examples are based on recovered the code snips. See also, <a href=\"http:\/\/mom.deptford.red\/2022\/01\/16\/using-modals-on-this-site\/\">using modals on this site<\/a> on my wordpress test site. Further testing proved that it was not possible to have two control modes for the same button. I deleted<a href=\"https:\/\/github.com\/dfl1955\/javascript\/blob\/main\/dfl_twomodals.html\"> the code that implemented the tied script,<\/a> which hard codes the button and modal name into the script. .<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example generation 2.1 &#8211; multiple modals<\/h3>\n\n\n\n<p>This was copied from mom.deptford.red&#8230;, this is a two modal test with inline event listener scripts<\/p>\n\n\n\n<style>\n.modal {\n    display: none; \/* Hidden by default *\/\n    position: fixed; \/* Stay in place *\/\n    z-index: 1; \/* Sit on top *\/\n    padding-top: 100px; \/* Location of the box *\/\n    \/* left: 0; *\/ top: 0;\n    width: 80%; \/* Full width *\/ height: 100%; \/* Full height *\/\n    overflow: auto; \/* Enable scroll if needed *\/\n    background-color: rgb(0,0,0); \/* Fallback color *\/\n    background-color: rgba(0,0,0,0.4); \/* Black w\/ opacity *\/\n}\n        \n\/* Modal Content *\/\n.modal-content { background-color: #fefefe; \n    margin: 5px; font-size: 80%; padding: 5px; width: 95%; border: 1px solid #888; }\n        \n\/* The Close Button *\/\n.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }    \n.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }\n    \n.modal-content2 {\n    display: none; \/* Hidden by default *\/\n    background-color: #fefefe;\n    margin: auto; padding: 20px;\n    border: 1px solid #888;\n    width: 95%;\n}\n.close2 { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }\n.close2:hover, .close2:focus { color: #000; text-decoration: none;cursor: pointer; }\n\n.scroll-box {\n      width: 650px; \/* maximum width of the box, feel free to change this! *\/\n      overflow-x: scroll; white-space: nowrap;     }\n<\/style>\n\n<p>Event listener with arguments, on both buttons; the &#8220;close object&#8221; needs to be uniquely named.<\/p>\n\n<p>The 2nd Button, strangely<\/p>\n\n<!-- Trigger\/Open The Modal -->\n<button id=\"myBtn2\">More Latin<\/button><br><br>\n\n<!-- The Modal -->\n<div id=\"myModal2\" class=\"modal\"><!-- Modal content -->\n    <div class=\"modal-content\" style=\"width: 80%;\"> \n        <span class=\"close2\">x<\/span>\n        <p style=\"font-size: 120%;\">A 2nd example modal<\/p>\n        <p style=\"font-size: 102%;\">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<\/p>\n<\/div>\n<\/div>\n\n<hr>\n\n<p>And no 1<\/p>\n<!-- Trigger\/Open The Modal -->\n<button id=\"myBtn\">Lorem Ipsum &#8230;<\/button><br><br>\n<!-- The Modal -->\n<div id=\"myModal\" class=\"modal\">\n\n<!-- Modal content -->\n<div class=\"modal-content\">\n    <span class=\"close\">x<\/span>\n    <p style=\"font-size: 120%;\">An example modal<\/p>\n    <p style=\"font-size: 102%;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n<\/div>\n<\/div>\n\n<script>\n\/\/ Get the modal  \nfunction showmodal (id,bid, cid) {\n\n    var modal = document.querySelector(id);\n    var btn = document.querySelector(bid);\n    var span = document.querySelector(cid);\n\n    btn.addEventListener(\"click\", function () {\n        modal.style.display = \"block\";\n    });\n\n    span.onclick = function () { modal.style.display = \"none\"; }\n    \/\/ When the user clicks anywhere outside of the modal, close it\n    window.addEventListener(\"click\", function (event) {\n        \/\/console.log(event.target);\n        if (event.target == modal) {\n            modal.style.display = \"none\";\n        }\n    });\n}\n<\/script>\n<script>\nshowmodal(\"#myModal\",\"#myBtn\",\".close\"); \nshowmodal(\"#myModal2\",\"#myBtn2\",\".close2\");\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\">The original implementation<\/h3>\n\n\n\n<p>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 <a href=\"https:\/\/www.w3schools.com\/howto\/howto_css_modals.asp\"> how to css\/js modals<\/a> at w3schools.com. I implemented the CSS in the theme CSS files. For <em>wordpress<\/em>, the script (and button if using the onclick argument) has to be held in a custom field or now, in <em>2023<\/em>, a Custom HTML block, or be implemented as an external css file, foe more see this <a href=\"https:\/\/davelevy.info\/wiki\/using-modals-on-this-site\/#comment-151288\">comments <\/a>. 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 <a href=\"https:\/\/davelevy.info\/wiki\/energy-climate-change-and-just-transition\/\">Energy, climate change and just transition.<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6667,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_share_on_mastodon":"0"},"categories":[27,3],"tags":[251,253,1470,920,911],"class_list":["post-6184","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","category-technology","tag-css","tag-html","tag-modal","tag-software","tag-technology"],"share_on_mastodon":{"url":"","error":""},"jetpack_featured_media_url":"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2022\/01\/html-from-makeuseof_com-w1024c.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/6184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/comments?post=6184"}],"version-history":[{"count":23,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/6184\/revisions"}],"predecessor-version":[{"id":7698,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/6184\/revisions\/7698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media\/6667"}],"wp:attachment":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media?parent=6184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/categories?post=6184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/tags?post=6184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}