Make our own feedback popup

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -147,6 +147,33 @@
     padding-top: 20px;
 }
 
-.no-close .ui-dialog-titlebar-close {
+.xblock--drag-and-drop .popup {
     display: none;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: none repeat scroll 0 0 #66A5B5;
+    opacity: 0.9;
+    padding: 10px;
+    width: 300px;
+    z-index: 100;
+}
+
+.xblock--drag-and-drop .popup .popup-content {
+    color: #fff;
+    font-family: arial;
+    font-size: 14px;
+}
+
+.xblock--drag-and-drop .popup .close {
+    cursor: pointer;
+    position: absolute;
+    top: 5px;
+    right: 3px;
+    width: 18px;
+    height: 21px;
+    font-family: FontAwesome;
+    font-style: normal;
+    text-align: center;
+    color: #fff;
 }

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -6,6 +6,7 @@ function DragAndDropBlock(runtime, element) {
             $ul: $('.xblock--drag-and-drop .items', element),
             $target: $('.xblock--drag-and-drop .target-img', element),
             $feedback: $('.xblock--drag-and-drop .feedback .message', element),
+            $popup: $('.xblock--drag-and-drop .popup', element),
 
             // Cannot set until items added to DOM
             $items: {}, // $('.xblock--drag-and-drop .items .option'),
@@ -82,6 +83,10 @@ function DragAndDropBlock(runtime, element) {
 
                     $dropzone.on('drop', clk.drop.success);
                     $dropzone.on('dropover', clk.drop.hover);
+
+                    $(".close", _fn.$popup).on('click', function() {
+                        _fn.$popup.hide();
+                    });
                 },
                 drag: {
                     start: function(event, ui) {
@@ -215,17 +220,8 @@ function DragAndDropBlock(runtime, element) {
                 // Show a feedback popup
                 popup: function(str, boo) {
                     if (str === undefined || str === '') return;
-                    return $("<div>").attr('title', boo ? 'Correct' : 'Incorrect')
-                        .text(str)
-                        .dialog({
-                            dialogClass: "no-close",
-                            modal: true,
-                            buttons: {
-                                Ok: function() {
-                                    $(this).dialog("close");
-                                }
-                            }
-                    });
+                    _fn.$popup.find(".popup-content").text(str);
+                    return _fn.$popup.show();
                 }
             },
 

drag_and_drop_v2/templates/html/drag_and_drop.html

@@ -13,6 +13,11 @@
     </section>
 
     <section class="drag-container">
+        <div class="popup">
+            <div class="close icon-remove-sign fa-times-circle"></div>
+            <p class="popup-content"></p>
+        </div>
+
         <ul class="items"></ul>
 
         <div class="target">