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.

7 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

 
7 Recommendations

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