Adds a dialog box for CSV export options (#4742).

git-svn-id: svn+ssh://rubyforge.org/var/svn/redmine/trunk@7874 e93f8b46-1217-0410-a6f0-8f06a7374b81

public/javascripts/application.js

@@ -186,6 +186,39 @@ function promptToRemote(text, param, url) {
     }
 }
 
+function showModal(id, width) {
+  el = $(id);
+	if (el == undefined || el.visible()) {return;}
+  var h = $$('body')[0].getHeight();
+  var d = document.createElement("div");
+  d.id = 'modalbg';
+  $('main').appendChild(d);
+  $('modalbg').setStyle({ width: '100%', height: h + 'px' });
+  $('modalbg').show();
+
+  var pageWidth = document.viewport.getWidth();
+	el.setStyle({'width': width});
+	el.setStyle({'left': (((pageWidth - el.getWidth())/2  *100) / pageWidth) + '%'});
+  el.addClassName('modal');
+	el.show();
+
+  var submit = el.down("input[type=submit]");
+	if (submit) {
+  	submit.focus();
+  }
+}
+
+function hideModal(el) {
+  var modal = Element.up(el, 'div.modal');
+	if (modal) {
+		modal.hide();
+	}
+	var bg = $('modalbg');
+	if (bg) {
+  	bg.remove();
+  }
+}
+
 function collapseScmEntry(id) {
     var els = document.getElementsByClassName(id, 'browser');
 	for (var i = 0; i < els.length; i++) {

public/stylesheets/application.css

@@ -91,6 +91,12 @@ 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;}
+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;}
+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; }
 
 .clear:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }