User Bootstrap modal for show exercise results - refs #7611

main/exercice/overview.php

@@ -163,7 +163,7 @@ if (!empty($attempts) && $visible_return['value'] == true) {
             $attempt_result['exe_result'],
             $attempt_result['exe_weighting']
         );
-        $attempt_url = api_get_path(WEB_CODE_PATH) . 'exercice/result.php?' . api_get_cidreq() . '&id=' . $attempt_result['exe_id'] . '&height=500&width=950' . $url_suffix;
+        $attempt_url = api_get_path(WEB_CODE_PATH) . 'exercice/result.php?' . api_get_cidreq() . '&id=' . $attempt_result['exe_id'] . '&modal_size=lg' . $url_suffix;
         $attempt_link = Display::url(
             get_lang('Show'),
             $attempt_url,

main/template/default/layout/footer.tpl

@@ -73,6 +73,22 @@
     </div>
 </div>
 
+{# Global modal, load content by AJAX call to href attribute on anchor tag with 'ajax' class #}
+<div class="modal fade" id="global-modal" tabindex="-1" role="dialog" aria-labelledby="global-modal-title" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title" id="global-modal-title">&nbsp;</h4>
+            </div>
+            <div class="modal-body">
+            </div>
+        </div>
+    </div>
+</div>
+
 <script>
     $("form").on("click", ' .advanced_parameters', function() {
         /*var id = $(this).attr('id') + '_options';

main/template/default/layout/head.tpl

@@ -367,47 +367,36 @@ $(function() {
     });
 
     // Global popup
-    $('.ajax').on('click', function() {
-        var url = this.href;
-        var dialog  = $("#dialog");
-        if ($("#dialog").length == 0) {
-            dialog  = $('<div id="dialog" style="display:none"></div>').appendTo('body');
-        }
-
-        var width_value = 580;
-        var height_value = 450;
-        var resizable_value = true;
+    $('a.ajax').on('click', function(e) {
+        e.preventDefault();
 
-        var new_param = get_url_params(url, 'width');
-        if (new_param) {
-            width_value = new_param;
-        }
+        var contentUrl = this.href,
+            loadModalContent = $.get(contentUrl);
 
-        var new_param = get_url_params(url, 'height')
-        if (new_param) {
-            height_value = new_param;
-        }
+        $.when(loadModalContent).done(function(modalContent) {
+            var modalDialog = $('#global-modal').find('.modal-dialog'),
+                modalSize = get_url_params(contentUrl, 'modal_size'),
+                modalWidth = get_url_params(contentUrl, 'width');
 
-        var new_param = get_url_params(url, 'resizable');
-        if (new_param) {
-            resizable_value = new_param;
-        }
+            modalDialog.removeClass('modal-lg modal-sm').css('width', '');
 
-        // load remote content
-        dialog.load(
-            url,
-            {},
-            function(responseText, textStatus, XMLHttpRequest) {
-                dialog.dialog({
-                    modal       : true,
-                    width       : width_value,
-                    height      : height_value,
-                    resizable   : resizable_value
-                });
+            if (modalSize) {
+                switch (modalSize) {
+                    case 'lg':
+                        modalDialog.addClass('modal-lg');
+                        break;
+                    case 'sm':
+                        modalDialog.addClass('modal-sm');
+                        break;
+                }
+            } else if (modalWidth) {
+                modalDialog.css('width', modalWidth + 'px');
             }
-        );
-        // prevent the browser to follow the link
-        return false;
+
+            $('#global-modal').find('.modal-body').html(modalContent);
+
+            $('#global-modal').modal('show');
+        });
     });
 
     $('a.expand-image').on('click', function(e) {