diff --git a/cookbook/templates/include/recipe_open_modal.html b/cookbook/templates/include/recipe_open_modal.html
new file mode 100644
index 000000000..6cbb78ac4
--- /dev/null
+++ b/cookbook/templates/include/recipe_open_modal.html
@@ -0,0 +1,79 @@
+{% load i18n %}
+
+<style>
+    .loader {
+        border: 16px solid #f3f3f3; /* Light grey */
+        border-top: 16px solid #3498db; /* Blue */
+        border-radius: 50%;
+        width: 120px;
+        height: 120px;
+        animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+</style>
+
+
+<div class="modal" tabindex="-1" role="dialog" id="modal_recipe">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">{% trans 'Recipe' %}</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" style="text-align: center">
+                <div class="loader" id="div_loader"></div>
+                <a href="" id="a_recipe_open" target="_blank" onclick="afterClick()" style="font-size: 250%"></a>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans 'Close' %}</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script type="text/javascript">
+    function openRecipe(id) {
+        var link = $('#a_recipe_open');
+        link.hide();
+        $('#div_loader').show();
+
+        var url = "{% url 'api_get_external_file_link' recipe_id=12345 %}".replace(/12345/, id);
+
+        link.text("{% trans 'Open Recipe' %}");
+        $('#modal_recipe').modal('show');
+
+        var xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function () {
+            if (this.readyState === 4 && this.status === 200) {
+                if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+                    link.attr("href", this.responseText);
+                    link.show();
+                } else {
+                    window.open(this.responseText);
+                    $('#modal_recipe').modal('hide');
+                }
+
+                $('#div_loader').hide();
+
+            }
+        };
+        xhttp.open("GET", url, true);
+        xhttp.send();
+    }
+
+    function afterClick() {
+        $('#modal_recipe').modal('hide');
+        return true;
+    }
+</script>
\ No newline at end of file