What is a Modal?

During the golden days of JQuery, Lightbox plugin is used to highlight an image by creating an overlay to the HTML body and highlight/zoom an image, However The Lightbox plugin only caters images, developers wants to extends the functionality to use lightbox to highlight other elements such as Forms, Videos, Contens. Thus, Lightbox 2 was created. While Lightbox 2 becomes stagnant and Browsers keeps evolving, Lightbox 2 becomes obsoletes, Bootstrap adapt Lightbox Legacy and created Modal. 


Anatomy of a Modal.

1. Trigger Element

 - Trigger element are events to when we can show the Modal. These events can be onload, onclick, etc. The most Popular of all is a Button click.

2. The Modal
- This is the Element that holds the content.

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

For reference and more knowledge regarding Bootstrap Modal you can visit the link below.

https://getbootstrap.com/docs/4.2/components/modal/



Integration with Hubspot Modules:

Developers allow to developers to code within Hubspot Via 

Marketing > Files and Templates > Design Tools.


Assuming that you know how create/edit a module, if not Please refer the link below.

https://knowledge.hubspot.com/articles/kcs_article/cos-general/create-and-edit-modules

Once the modules is created add a new field at the HTML section of the editor. Copy and Paste the Modal code above.

On the Right Navigation add a new field with Form object of Hubspot to be the content of the Modal. 








with the knowledge of HUBL syntax we can now add the snippet into the Modal Content. The modal code would look like this.

under with the div element with the modal-body class.

<div class="modal-body">
      {\% form
         form_to_use="{\{ module.form_field.form_id \}}"
         response_response_type="{\{ module.form_field.response_type \}}"
         response_message="{\{ module.form_field.message }}"
         response_redirect_id="{\{ module.form_field.redirect_id \}}"
         response_redirect_url="{\{module.form_field.redirect_url\}}"
         gotowebinar_webinar_key="{\{ module.form_field.gotowebinar_webinar_key \}}"
       \%}
</div>

Now that the Modal is added as a module. we can now use the module in a template

For adding the Module to page/blog/email Please refer to this link. 
https://knowledge.hubspot.com/articles/kcs_article/cos-general/create-and-edit-modules