Hide modal when not in use

Author: AJ Griffiths

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/call_to_action.html

@@ -25,24 +25,26 @@ <h2 class="heading heading--two-b call-to-action__heading">{{ value.text }}</h2>
     </div>
 </div>
 
-<!-- Modal content -->
-<div class="modal" id="iframe-embed-modal" aria-hidden="true">
-    <div class="modal__overlay" tabindex="-1" data-micromodal-close></div>
-    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title" >
-        <header class="modal__header">
-            <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry</h2>
-            <div class="modal__close">
-                {% include "patterns/atoms/icon_buttons/icon_button.html" with modifier="close" data="data-micromodal-close" aria='aria-label="Close modal"' %}
-            </div>
-        </header>
-        <main class="modal__content" id="filters-content">
-            <iframe
-                src="{{ cta.value.get_button_link }}"
-                width="100%"
-                height="650px"
-                frameborder="0"
-                title="Modal Webform">
-            </iframe>
-        </main>
+{% if value.get_button_link_block.block_type == "modal_iframe" %}
+    <!-- Modal content -->
+    <div class="modal" id="iframe-embed-modal" aria-hidden="true">
+        <div class="modal__overlay" tabindex="-1" data-micromodal-close></div>
+        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title" >
+            <header class="modal__header">
+                <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry</h2>
+                <div class="modal__close">
+                    {% include "patterns/atoms/icon_buttons/icon_button.html" with modifier="close" data="data-micromodal-close" aria='aria-label="Close modal"' %}
+                </div>
+            </header>
+            <main class="modal__content" id="filters-content">
+                <iframe
+                    src="{{ cta.value.get_button_link }}"
+                    width="100%"
+                    height="650px"
+                    frameborder="0"
+                    title="Modal Webform">
+                </iframe>
+            </main>
+        </div>
     </div>
-</div>
+{% endif %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/sticky_call_to_action.html

@@ -25,24 +25,26 @@
     </div>
 </div>
 
-<!-- Modal content -->
-<div class="modal" id="iframe-embed-modal" aria-hidden="true">
-    <div class="modal__overlay" tabindex="-1" data-micromodal-close></div>
-    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title" >
-        <header class="modal__header">
-            <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry</h2>
-            <div class="modal__close">
-                {% include "patterns/atoms/icon_buttons/icon_button.html" with modifier="close" data="data-micromodal-close" aria='aria-label="Close modal"' %}
-            </div>
-        </header>
-        <main class="modal__content" id="filters-content">
-            <iframe
-                src="{{ value.get_button_link }}"
-                width="100%"
-                height="650px"
-                frameborder="0"
-                title="Modal Webform">
-            </iframe>
-        </main>
+{% if value.get_button_link_block.block_type == "modal_iframe" %}
+    <!-- Modal content -->
+    <div class="modal" id="iframe-embed-modal" aria-hidden="true">
+        <div class="modal__overlay" tabindex="-1" data-micromodal-close></div>
+        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title" >
+            <header class="modal__header">
+                <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry</h2>
+                <div class="modal__close">
+                    {% include "patterns/atoms/icon_buttons/icon_button.html" with modifier="close" data="data-micromodal-close" aria='aria-label="Close modal"' %}
+                </div>
+            </header>
+            <main class="modal__content" id="filters-content">
+                <iframe
+                    src="{{ value.get_button_link }}"
+                    width="100%"
+                    height="650px"
+                    frameborder="0"
+                    title="Modal Webform">
+                </iframe>
+            </main>
+        </div>
     </div>
-</div>
+{% endif %}