HubSpot CMS

A Modal with spice

Popup allowing for easy input of forms, videos, and text

Created by: beacondigitalmarketing

Tags: Modals

Unverified
?

After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

4 Recommendations

View on:

GitHub

HTML + HUBL
          
            <div class="modal-outer">
  <div class="modal 
    {% if module.modal_type == "video_embed" %} video {%elif module.modal_type == "form_embed" %} form {% endif %}" >
    <a id="close" href="#0" aria-label="close"></a>
    {% if module.modal_type == "text_embed" %}
      {{ module.textModal }}
    {% elif module.modal_type == "video_embed" %}
    
      {% if module.video_source == "vimeo" %}
        {{ module.vimeo_embed }}
      {% else %}
      <div style="padding:56.25% 0 0 0;position:relative;">
        {% if  module.video_source == "file_upload" %}
        <video width="" height="" controls>
          <source src="{{ module.file_field }}">
         Your browser does not support the video tag.
        </video> 
        {% elif  module.video_source == "iframe" %}
        {{ module.iframe_embed }}
        {% endif%}
      </div>
      {% endif %}

    {% else %}
    {% if module.form_title %}
    <h3>
      {{ module.form_title }}
    </h3>
    {% endif %}
    {%form module.form_embed form%}
    
    {% endif %}
  </div>
</div>
<span id="clickerName" style="display:none">{{ module.clickerName }}</span>
          
        
CSS
          
            .modal-outer {
  background-color: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: -1000;
  visibility: hidden;
  -webkit-transition: 300ms all ease-in-out;
  transition: 300ms all ease-in-out;
}
.modal-outer.visible {
  opacity: 1;
  visibility: visible;
  z-index: 10000;
}
.modal {
  padding: 40px;
  margin: 20px;
  border-radius: 10px;
  background: white;
  max-width: 500px;
  opacity: 0;
  visibility: hidden;
  position: relative;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.modal.video,
.modal.form {
  width: 100%;
  max-width: 700px;
  padding: 30px;
}
.visible .modal {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 300ms ease, opacity 100ms ease;
  transition: all 300ms ease, opacity 100ms ease;
}
.modal #close {
  height: 36px;
  width: 36px;
  border-radius: 50%;
  position: absolute;
  top: -3%;
  right: -1%;
  background-color: #fff;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.modal #close:focus {
  border: 1px dashed teal;
}
.modal #close:hover {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.modal #close::after,
.modal #close::before {
  content: "";
  height: 20px;
  width: 1px;
  background-color: #ccc;
  position: absolute;
}
.modal #close::before {
  left: 47%;
  top: 20%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.modal #close::after {
  left: 47%;
  top: 20%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.modal iframe,
.modal video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

          
        
JS
          
            // js
$("document").ready(function(){
var clicky = "#" + $("#clickerName").html();
var lastFocus;  
  function disappear (){
    $(".modal-outer").removeClass("visible");
  }
$(clicky).click(function() {
  event.preventDefault();
  $(".modal-outer").addClass("visible");
});
$("#close").click(function() {
  event.preventDefault();
  disappear();
});
$(document).mouseup(function(e) {
  var container = $(".modal");
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    disappear();
  }
});
  function modalClose ( e ) {
  if ( !e.keyCode || e.keyCode === 27 ) {
    disappear();
  }
}
document.addEventListener('keydown', modalClose);
})
          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

HubSpot

Code Gallery


Modal with multiple flavors!

Has someone ever came up to you and said, "Hey, I want a popup and I want it now! Also, It should support text, forms and videos. Why are you still here. GO DO IT!"? Well friends, sit down and crack open a brew. I have a treat for you. This module comes packed with the ability to add a modal window tied to any element with a specified ID. You want rich text? You got it. You need a form? Let's go. How about a video? Vimeo, youtube, embedded video. No problemo

But how do I do it? This is super simple. Add the module to your page, find the CTA or whatever you want the user to click and add an ID to it. So Example: <button id="clickThis">CLICK, RICK</button> Then, pop that ID into the module. After that it is all gravy. Select what kind of content you want and the relevant fields will appear

Module Gif

 
4 Recommendations

Contribute to the Gallery!

We bet you’ve coded some amazing stuff. Showcase them and help the community grow.

Contribute

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Contribute
Made with  by community members: InboundLabs.co