replacement of jquery ui dialog for bootstrap modal for jump to note dialog, #203

src/public/javascripts/dialogs/jump_to_note.js

@@ -13,11 +13,7 @@ async function showDialog() {
 
     $autoComplete.val('');
 
-    $dialog.dialog({
+    $dialog.modal();
-        modal: true,
-        width: 800,
-        position: { my: "center top+100", at: "top", of: window }
-    });
 
     await $autoComplete.autocomplete({
         source: noteautocompleteService.autocompleteSource,

src/public/stylesheets/style.css

@@ -69,7 +69,7 @@ body {
 }
 
 .tdialog {
-    display: none; /* hidden by default */
+    display: none;
 }
 
 #note-detail-wrapper {

src/views/dialogs/jump_to_note.ejs

@@ -1,4 +1,13 @@
-<div id="jump-to-note-dialog" class="tdialog" title="Jump to note">
+<div id="jump-to-note-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Jump to note</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 class="form-group">
                     <label for="jump-to-note-autocomplete">Note</label>
                     <div class="input-group">
@@ -9,6 +18,10 @@
                         </div>
                     </div>
                 </div>
-
+            </div>
+            <div class="modal-footer">
                 <button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>ctrl+enter</kbd></button>
             </div>
+        </div>
+    </div>
+</div>