diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index e3ac46245..0746817f4 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -273,33 +273,27 @@ function setPredecessorFieldsVisibility() {
 }
 
 function showModal(id, width) {
-  el = $('#'+id).first();
+  var el = $('#'+id).first();
   if (el.length == 0 || el.is(':visible')) {return;}
-  var h = $('body').height();
-  var d = document.createElement("div");
-  d.id = 'modalbg';
-  $(d).appendTo('#main').css('width', '100%').css('height', h + 'px').show();
-
-  var pageWidth = $(window).width();
-  if (width) {
-    el.css('width', width);
-  }
-  el.css('left', (((pageWidth - el.width())/2  *100) / pageWidth) + '%');
-  el.addClass('modal');
-  el.show();
-
+  var title = el.find('h3.title').text();
+  el.dialog({
+    width: width,
+    modal: true,
+    resizable: false,
+    dialogClass: 'modal',
+    title: title
+  });
   el.find("input[type=text], input[type=submit]").first().focus();
 }
 
 function hideModal(el) {
   var modal;
   if (el) {
-    modal = $(el).parents('div.modal').first();
+    modal = $(el).parents('.ui-dialog-content');
   } else {
     modal = $('#ajax-modal');
   }
-  modal.hide();
-  $('#modalbg').remove();
+  modal.dialog("close");
 }
 
 function submitPreview(url, form, target) {
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 10ebeb93d..8a3e14072 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -91,12 +91,9 @@ html>body #content { min-height: 600px; }
 #login-form label {font-weight: bold;}
 #login-form input#username, #login-form input#password { width: 300px; }
 
-#modalbg {position:absolute; top:0; left:0; width:100%; height:100%; background:#ccc; z-index:49; opacity:0.5;}
-html>body #modalbg {position:fixed;}
-div.modal { border-radius:5px; position:absolute; top:25%; background:#fff; border:2px solid #759FCF; z-index:50; padding:0px; padding:8px; box-shadow: 1px 1px 8px #888; }
-div.modal h3.title {background:#759FCF; color:#fff; border:0; padding-left:8px; margin:-8px; margin-bottom: 1em; border-top-left-radius:2px;border-top-right-radius:2px;}
+div.modal { border-radius:5px; background:#fff; z-index:50; padding:4px;}
+div.modal h3.title {display:none;}
 div.modal p.buttons {text-align:right; margin-bottom:0;}
-html>body div.modal {position:fixed;}
 
 input#openid_url { background: url(../images/openid-bg.gif) no-repeat; background-color: #fff; background-position: 0 50%; padding-left: 18px; }