Using a Modal Window with Google Classroom

eodonnell
Member

I have setup the simple modal window module outlined here:

https://designers.hubspot.com/blog/how-to-implement-a-modal-on-your-cms-site-pages

It works great, however I am trying to add in a simple google classroom button following the API here:

https://developers.google.com/classroom/guides/sharebutton

This works as well - however I have an issue with the button icon loading and showing outside of the modal div.  See example here:

https://lp.teachingmatters.org/learning-from-home-distance-learning-for-teachers-6-0?hs_preview=OHhy...

The "click here" link at the bottom loads and works...but the icon is annoyingly appearing in the middle of the page at all times.  Not sure how to get it hidden.  This is the click here code:

 

<a href="#" data-reveal-id="3-23-ela">Click Here</a>
<div id="3-23-ela" class="reveal-modal" style="top: 100px; opacity: 1; visibility: hidden;">
<h1>ELA for 3/23</h1>
<p>Add to Classroom:</p>
<div class="g-sharetoclassroom" data-size="32" data-url="https://www.teachingmatters.org">&nbsp;</div>
<hr>
<p>Additional Google Docs for you to copy and use in your classroom with this activity:</p>
<ul>
<li><a href="https://docs.google.com/document/d/1iIp3JmL1QZfdVsKLGFbGIm3cGabKBsDeXoZP-IvZmX0/copy">Myth Brainstory and Write</a></li>
<li><a href="https://docs.google.com/forms/d/1iZCILaFTIqkZMoKhXPalhg2sebLKoyOIHTNOm7BYhH4/copy">Myth Response (form)</a></li>
</ul>
<a class="close-reveal-modal">×</a></div>
<div class="reveal-modal-bg" style="opacity: 0.8; display: none; cursor: pointer;">&nbsp;</div>

0 Upvotes
1 Reply 1
WendyGoh
HubSpot Employee

Hey @eodonnell,

 

The reason why you're seeing the Google classroom button showing up on the page is because the button is render by a Javascript. Hence, once the Javascript is being loaded on the page, the button will be visible. 

 

On my end, I managed to get the button to not load when a user first enter the page by adding the following: 

 

    <script>
      window.___gcfg = {
        parsetags: 'explicit'
      };
      function renderWidget() {
        gapi.sharetoclassroom.render("widget-div",
            {"url": "https://www.teachingmatters.org"} );
      }
      
    </script>
    <script src="https://apis.google.com/js/platform.js">
    </script>

On the 'Additional <head> markup' section of the 'Thank You Page' template. Next, on the page editor's rich text source code, I replaced this:

 

<div class="g-sharetoclassroom" data-size="32" data-url="https://www.teachingmatters.org">&nbsp;</div>

with this:

<div id="widget-div">&nbsp;</div>

I haven't publish the change yet but if you preview it here: https://lp.teachingmatters.org/learning-from-home-distance-learning-for-teachers-6-0?hs_preview=OHhy... you should be able to see that the button only appear after clicking on the 'Click Here' button.

 

However, do note that if a customer exit the modal, the button will show up on the main page. This is because the Javascript has been rendered. For this,  I'd strongly recommend you to use a bootstrap modal: Modal · Bootstrap > so that you can use the bootstrap function discussed here: jquery - Refresh page after bootstrap modal close - Stack Overflow to refresh the page after a moda has been closed. 

 

Let me know if there's any further questions on this 🙂 

0 Upvotes