<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>
          
        

          
            .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
$("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);
})