Index: css/media.css
===================================================================
RCS file: /cvs/drupal-contrib/contributions/modules/media/css/media.css,v
retrieving revision 1.13
diff -u -p -r1.13 media.css
--- css/media.css	7 Sep 2010 16:37:35 -0000	1.13
+++ css/media.css	7 Sep 2010 18:48:06 -0000
@@ -202,10 +202,19 @@
   width: auto;
 }
 
+.ui-dialog.media-wrapper .ui-dialog-buttonpane {
+  display: none;
+}
+
+.ui-widget.ui-widget-content.media-wrapper {
+  background: none;
+  border: none;
+}
+
 /* @group media browser */
 
 body.page-media-browser {
-  background-color: #fff;
+  background: none;
 }
 
 div#media-browser-tabs {
@@ -215,10 +224,6 @@ div#media-browser-tabs {
   border: 0;
 }
 
-body.page-media-browser {
-  background-color: #fff;
-}
-
 /* show the throbber on the page */
 div#media-browser .throbber {
   height:100%;
@@ -240,6 +245,33 @@ div#media-browser .throbber {
   margin-left: 0;
 }
 
+#mediaBrowser body {
+  background: none;
+}
+
+#media-browser-tabset {
+  background: #FFF;
+}
+
+#media-browser-tabset .media-browser-tab {
+  border: 1px solid #aaa;
+}
+
+#media-browser-tabset .ui-tabs-nav {
+  border-left: 1px solid #aaa;
+  border-right: 1px solid #aaa;
+  border-top: 1px solid #aaa;
+}
+
+.fake-ok {
+  margin-right: 5px;
+}
+
+a.button {
+  display: inline-block;
+  line-height: 21px;
+}
+
 /* @end media browser */
 
 /* @group media edit page */
@@ -306,4 +338,21 @@ div#media-browser .throbber {
    margin-top:1.5em;
 }
 
+body.page-media-format-form {
+  background: none;
+}
+
+#media-browser-page {
+  background: #FFF;
+  padding: 1px 0;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}
+
+a.button {
+  display: inline-block;
+  margin: 10px 5px 0 0;
+}
+
 /* @end media format form */
\ No newline at end of file
Index: javascript/media-browser.js
===================================================================
RCS file: /cvs/drupal-contrib/contributions/modules/media/javascript/media-browser.js,v
retrieving revision 1.3
diff -u -p -r1.3 media-browser.js
--- javascript/media-browser.js	2 Jun 2010 12:12:09 -0000	1.3
+++ javascript/media-browser.js	7 Sep 2010 18:48:06 -0000
@@ -19,6 +19,9 @@ Drupal.behaviors.experimentalMediaBrowse
       Drupal.media.browser.finalizeSelection();
     }
     $('#media-browser-tabset').tabs();
+
+    $('.media-browser-tab').each( Drupal.media.browser.validateButtons );
+
   }
   // Wait for additional params to be passed in.
 };
@@ -27,6 +30,50 @@ Drupal.media.browser.launch = function (
 
 };
 
+Drupal.media.browser.validateButtons = function() {
+  // The media browser runs in an IFRAME. The Drupal.media.popups.mediaBrowser()
+  // function sets up the IFRAME and "OK" and "Cancel" buttons that are outside
+  // of the IFRAME, so that their click handlers can destroy the IFRAME while
+  // retaining information about what media items were selected. However,
+  // Drupal UI convention is to place all action buttons on the same "line"
+  // at the bottom of the form, so if the form within the IFRAME contains a
+  // "Submit" button or other action buttons, then the "OK" and "Cancel"
+  // buttons below the IFRAME break this convention and confuse the user.
+  // Therefore, we add "Submit" and "Cancel" buttons inside the IFRAME, and
+  // have their click action trigger the click action of the corresonding
+  // "OK" and "Cancel" buttons that are outside the IFRAME. media.css contains
+  // CSS rules that hide the outside buttons.
+  //
+  // We don't add a "Submit" button if the form already has one, since in these
+  // cases, another round-trip to the server is needed before the user's
+  // selection is finalized. For these cases, when the form's real Submit
+  // button is clicked, the server either returns another form for the user to
+  // fill out, or else a completion page that contains or sets the
+  // Drupal.media.browser.selectedMedia variable. If the latter, then
+  // Drupal.media.popups.mediaBrowser.mediaBrowserOnLoad() auto-triggers the
+  // "OK" button action to finalize the selection and remove the IFRAME.
+  //
+  // @todo An alternate, less hacky solution would be most welcome.
+  if (!($('.form-submit', this).length > 0)) {
+    $('<a class="button fake-ok">Submit</a>').appendTo(this).bind('click', Drupal.media.browser.submit);
+    if (!($('.fake-cancel', this).length > 0)) {
+      $('<a class="button fake-cancel">Cancel</a>').appendTo(this).bind('click', Drupal.media.browser.submit);
+    }
+  } else if (!($('.fake-cancel', this).length > 0)) {
+    $('<a class="button fake-cancel">Cancel</a>').appendTo('form > div', this).bind('click', Drupal.media.browser.submit);
+  }
+};
+
+Drupal.media.browser.submit = function () {
+  // @see Drupal.media.browser.validateButtons().
+  var buttons = $(parent.window.document.body).find('#mediaBrowser').parent('.ui-dialog').find('.ui-dialog-buttonpane button');
+  if ($(this).hasClass('fake-cancel')) {
+    buttons[1].click();
+  } else {
+    buttons[0].click();
+  }
+}
+
 Drupal.media.browser.selectMedia = function (selectedMedia) {
   Drupal.media.browser.selectedMedia = selectedMedia;
 };
Index: javascript/media-format-form.js
===================================================================
RCS file: /cvs/drupal-contrib/contributions/modules/media/javascript/media-format-form.js,v
retrieving revision 1.4
diff -u -p -r1.4 media-format-form.js
--- javascript/media-format-form.js	17 Jun 2010 15:51:08 -0000	1.4
+++ javascript/media-format-form.js	7 Sep 2010 18:48:06 -0000
@@ -13,7 +13,11 @@ Drupal.media.mediaFormatSelected = {};
 
 Drupal.behaviors.mediaFormatForm = {
   attach: function (context, settings) {
-    
+    // Add "Submit" and "Cancel" buttons inside the IFRAME that trigger the
+    // behavior of the hidden "OK" and "Cancel" buttons that are outside the
+    // IFRAME. See Drupal.media.browser.validateButtons() for more details.
+    $('<a class="button fake-ok">Submit</a>').appendTo($('#media-format-form')).bind('click', Drupal.media.formatForm.submit);
+    $('<a class="button fake-cancel">Cancel</a>').appendTo($('#media-format-form')).bind('click', Drupal.media.formatForm.submit);
   }
 };
 
@@ -28,4 +32,14 @@ Drupal.media.formatForm.getFormattedMedi
   return { type: formatType, options: Drupal.media.formatForm.getOptions(), html: Drupal.settings.media.formatFormFormats[formatType] };
 };
 
+Drupal.media.formatForm.submit = function () {
+  // @see Drupal.behaviors.mediaFormatForm.attach().
+  var buttons = $(parent.window.document.body).find('#mediaStyleSelector').parent('.ui-dialog').find('.ui-dialog-buttonpane button');
+  if ($(this).hasClass('fake-cancel')) {
+    buttons[1].click();
+  } else {
+    buttons[0].click();
+  }
+}
+
 })(jQuery);
Index: javascript/media.popups.js
===================================================================
RCS file: /cvs/drupal-contrib/contributions/modules/media/javascript/media.popups.js,v
retrieving revision 1.6
diff -u -p -r1.6 media.popups.js
--- javascript/media.popups.js	26 Jul 2010 19:17:02 -0000	1.6
+++ javascript/media.popups.js	7 Sep 2010 18:48:06 -0000
@@ -80,11 +80,13 @@ Drupal.media.popups.mediaBrowser = funct
       return;
     }
     onSelect(selected);
-    $(this).dialog("close");
+    $(this).dialog("destroy");
+    $(this).remove();
   };
 
   dialogOptions.buttons[cancel] = function () {
-    $(this).dialog("close");
+    $(this).dialog("destroy");
+    $(this).remove();
   };
 
   Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions));
@@ -117,6 +119,17 @@ Drupal.media.popups.mediaBrowser.getDefa
   };
 };
 
+Drupal.media.popups.mediaBrowser.finalizeSelection = function () {
+  var selected = this.contentWindow.Drupal.media.browser.selectedMedia;
+  if (selected.length < 1) {
+    alert(notSelected);
+    return;
+  }
+  onSelect(selected);
+  $(this).dialog("destroy");
+  $(this).remove();
+}
+
 /**
  * Style chooser Popup. Creates a dialog for a user to choose a media style.
  *
@@ -165,11 +178,13 @@ Drupal.media.popups.mediaStyleSelector =
       return;
     }
     onSelect(formattedMedia);
-    $(this).dialog("close");
+    $(this).dialog("destroy");
+    $(this).remove();
   };
 
   dialogOptions.buttons[cancel] = function () {
-    $(this).dialog("close");
+    $(this).dialog("destroy");
+    $(this).remove();
   };
 
   Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions));
@@ -190,7 +205,6 @@ Drupal.media.popups.mediaStyleSelector.g
 };
 
 
-
 /**
  * Style chooser Popup. Creates a dialog for a user to choose a media style.
  *
@@ -241,11 +255,13 @@ Drupal.media.popups.mediaFieldEditor = f
       return;
     }
     onSelect(formattedMedia);
-    $(this).dialog("close");
+    $(this).dialog("destroy");
+    $(this).remove();
   };
 
   dialogOptions.buttons[cancel] = function () {
-    $(this).dialog("close");
+    $(this).dialog("destroy");
+    $(this).remove();
   };
 
   Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions));
@@ -278,13 +294,14 @@ Drupal.media.popups.mediaFieldEditor.get
 Drupal.media.popups.getDialogOptions = function () {
   return {
     buttons: {},
+    dialogClass: 'media-wrapper',
     modal: true,
-    draggable: true,
-    resizable: true,
+    draggable: false,
+    resizable: false,
     minWidth: 600,
     width: 800,
-    height:500,
-    position: 'top',
+    height: 500,
+    position: 'center',
     overlay: {
       backgroundColor: '#000000',
       opacity: 0.4
