• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How do I use an image button to activate a popup modal?

Explorer ,
Aug 02, 2021 Aug 02, 2021

Copy link to clipboard

Copied

I need help getting a button to activate a modal popup. The buttton on image looks like this:

Galeodan_0-1627947807380.png

And the modal like this:

Galeodan_1-1627948026753.png

 

I have the button working and I have the modal popup working - But I can't figure out how to link the two -  What elements in the button need to be called in the script?

 

This is the button:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- ---------------- EXTERNAL LINK DISABLED FOR FORUM -->
        <!-- <link href="css/global.css" rel="stylesheet" type="text/css" /> -->
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <style>
            .calbtncontainer {
                position: relative;
                width: 100%;
                max-width: 400px;
            }

            .calbtncontainer img {
                width: 100%;
                height: auto;
            }

            .calbtncontainer .calbtn {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: rgb(47, 100, 61);
                color: white;
                font-size: 16px;
                padding: 12px 24px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
                text-align: center;
            }

            .calbtncontainer .calbtn:hover {
                background-color: black;
            }
        </style>
    </head>
    <body>
        <!-- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB -->
        <!-- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB B O D Y BBBB -->
        <!-- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB -->
        <!--  -->

        <h2>Button on Image</h2>
        <p>Add a button to an image:</p>

        <div class="calbtncontainer">
            <img
                src="images/link_calendar.jpg"
                alt="Calendar"
                style="
                    width: 100%;
                    border: 1px black solid;
                    border-radius: 10px;
                "
            />
            <button class="calbtn">Check Availability</button>
        </div>
    </body>
</html>

And this is the modal popup (the big mess in the middle is the Google calendar link):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!-- ---------------- EXTERNAL LINK DISABLED FOR FORUM -->
        <!-- <link href="css/global.css" rel="stylesheet" type="text/css" /> -->
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            .modal_1 {
                display: none; /* Hidden by default */
                position: fixed; /* Stay in place */
                z-index: 1; /* Sit on top */
                padding-top: 100px; /* Location of the box */
                left: 0;
                top: 0;
                width: 100%; /* Full width */
                height: 100%; /* Full height */
                overflow: auto; /* Enable scroll if needed */
                background-color: rgb(0, 0, 0); /* Fallback color */
                background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
            }

            /* Modal Content */
            .modal_1-content {
                background-color: cyan;
                margin: auto;
                padding: 20px;
                border: 1px solid #888;
                width: 50%;
            }

            /* The Close Button */
            .close {
                color: #aaaaaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }

            .close:hover,
            .close:focus {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }

            .modalcontainer-16x9 {
                position: relative;
                overflow: hidden;
                width: 100%;
                padding-top: 56.25%;
            }

            /* Then style the iframe to fit in the container div with full height and width */
            .responsiveiframe {
                position: absolute;
                border: solid 1px #777;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <h2>Modal Example</h2>

        <!-- Trigger/Open The Modal -->
        <button id="calBtn">Open Modal</button>

        <!-- The Modal -->
        <div id="calModal" class="modal_1">
            <!-- Modal content -->

            <div class="modal_1-content">
                <span class="close">&times;</span>
                <!--  -->
                <!--  -->
                <div class="modalcontainer-16x9">
                    <iframe
                        class="responsiveiframe"
                        src="https://calendar.google.com/calendar/embed?height=750&amp;wkst=1&amp;bgcolor=%23ffffff&amp;ctz=Pacific%2FGalapagos&amp;src=dDdua2M1NzYzZmU0OTV0cjNwY2hpcmxlcTBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;src=cm9kbDdxN2VoY3NtYW9sbHIyZnJzZTdiNjBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;src=MmdkMmxmb21nY2JiYmg5ampwcnN2N3BoN2tAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;src=Mm9vMjYyMmkzY2xrOGVmOWNpbjdxYTNldHNAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%237CB342&amp;color=%234285F4&amp;color=%23EF6C00&amp;color=%23B39DDB&amp;showTitle=0"
                    ></iframe>
                </div>
                <!--  -->
                <!--  -->
            </div>
        </div>

        <script>
            // Get the modal
            var modal = document.getElementById("calModal");

            // Get the button that opens the modal
            var btn = document.getElementById("calBtn");

            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];

            // When the user clicks the button, open the modal
            btn.onclick = function () {
                modal.style.display = "block";
            };

            // When the user clicks on <span> (x), close the modal
            span.onclick = function () {
                modal.style.display = "none";
            };

            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function (event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            };
        </script>
    </body>
</html>

Maybe there is a simpler way to do the button. I could just use the image itself but the button on the image is a bit more intuitive for the user.

 

 

 

Views

1.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Aug 04, 2021 Aug 04, 2021

Should be a capital 'B' see below in red:

 

<button class="calbtn" id="calBtn">Check Availability</button>

 

When this happens a starting place is to look for errors by using your browsers dev-tools especially the web-console to check for possible javacsript errors. In this case you would have seen:

 

Uncaught TypeError: btn is null

 

So you look for that line in the javascript and check it with the id name in the code to see if it matches.

 

 

Votes

Translate

Translate
LEGEND ,
Aug 03, 2021 Aug 03, 2021

Copy link to clipboard

Copied

The modal is not working because your button currently has a  'class' name and not an 'id' name

 

The javascript is looking for an 'id' with the name of 'calBtn' not a 'class' with the name of 'calBtn'

 

Change your button name to an 'id' and see if it solves the problem or you can just add the 'id' to the button and give it the same name as the class, so you have an 'id' and a 'class' then you wont have to amend your css selector names........whichever you find easier.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 04, 2021 Aug 04, 2021

Copy link to clipboard

Copied

Hi Osgood. I have tried doing as you suggest but it still does not work. I copy the combined file below - Maybe you can see where I am slipping up.

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- ---------------- EXTERNAL LINK DISABLED FOR FORUM -->
        <!-- <link href="css/global.css" rel="stylesheet" type="text/css" /> -->
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <style>
            /* ================= BUTTON ON IMAGE */
            .calbtncontainer {
                position: relative;
                width: 100%;
                max-width: 400px;
            }

            .calbtncontainer img {
                width: 100%;
                height: auto;
            }

            .calbtncontainer .calbtn {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: rgb(47, 100, 61);
                color: white;
                font-size: 16px;
                padding: 12px 24px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
                text-align: center;
            }

            .calbtncontainer .calbtn:hover {
                background-color: black;
            }

            /* ================= MODAL */
            .modal_1 {
                display: none; /* Hidden by default */
                position: fixed; /* Stay in place */
                z-index: 1; /* Sit on top */
                padding-top: 100px; /* Location of the box */
                left: 0;
                top: 0;
                width: 100%; /* Full width */
                height: 100%; /* Full height */
                overflow: auto; /* Enable scroll if needed */
                background-color: rgb(0, 0, 0); /* Fallback color */
                background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
            }

            /* Modal Content */
            .modal_1-content {
                background-color: cyan;
                margin: auto;
                padding: 20px;
                border: 1px solid #888;
                width: 50%;
            }

            /* The Close Button */
            .close {
                color: #aaaaaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }

            .close:hover,
            .close:focus {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }

            .modalcontainer-16x9 {
                position: relative;
                overflow: hidden;
                width: 100%;
                padding-top: 56.25%;
            }

            /* Then style the iframe to fit in the container div with full height and width */
            .responsiveiframe {
                position: absolute;
                border: solid 1px #777;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <!--  -->
        <!-- ================= BUTTON ON IMAGE -->
        <div class="calbtncontainer">
            <img
                src="images/link_calendar.jpg"
                alt="Calendar"
                style="
                    width: 100%;
                    border: 1px black solid;
                    border-radius: 10px;
                "
            />

            <button class="calbtn" id="calbtn">Check Availability</button>
        </div>
        <!-- ================= MODAL WITH SCRIPT -->
        <!-- The Modal -->
        <div id="calModal" class="modal_1">
            <!-- Modal content -->

            <div class="modal_1-content">
                <span class="close">&times;</span>
                <!--  -->
                <!--  -->
                <div class="modalcontainer-16x9">
                    <iframe
                        class="responsiveiframe"
                        src="https://calendar.google.com/calendar/embed?height=750&amp;wkst=1&amp;bgcolor=%23ffffff&amp;ctz=Pacific%2FGalapagos&amp;src=dDdua2M1NzYzZmU0OTV0cjNwY2hpcmxlcTBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;src=cm9kbDdxN2VoY3NtYW9sbHIyZnJzZTdiNjBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;src=MmdkMmxmb21nY2JiYmg5ampwcnN2N3BoN2tAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;src=Mm9vMjYyMmkzY2xrOGVmOWNpbjdxYTNldHNAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%237CB342&amp;color=%234285F4&amp;color=%23EF6C00&amp;color=%23B39DDB&amp;showTitle=0"
                    ></iframe>
                </div>
                <!--  -->
                <!--  -->
            </div>
        </div>

        <script>
            // Get the modal
            var modal = document.getElementById("calModal");

            // Get the button that opens the modal
            var btn = document.getElementById("calBtn");

            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];

            // When the user clicks the button, open the modal
            btn.onclick = function () {
                modal.style.display = "block";
            };

            // When the user clicks on <span> (x), close the modal
            span.onclick = function () {
                modal.style.display = "none";
            };

            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function (event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            };
        </script>
    </body>
</html>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 04, 2021 Aug 04, 2021

Copy link to clipboard

Copied

Should be a capital 'B' see below in red:

 

<button class="calbtn" id="calBtn">Check Availability</button>

 

When this happens a starting place is to look for errors by using your browsers dev-tools especially the web-console to check for possible javacsript errors. In this case you would have seen:

 

Uncaught TypeError: btn is null

 

So you look for that line in the javascript and check it with the id name in the code to see if it matches.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 04, 2021 Aug 04, 2021

Copy link to clipboard

Copied

LATEST

Thanks Osgood. I missed that one - DUH! I'm gaining an eye for spotting capitalization and space errors in imges etc. I'll be looking out, more carefully for this one too. 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines