title: JQuery Modal Dialog with drop-down list embedded
body: <p>I am kind of new to JavaScript but I have a requirement where I need a modal dialog to appear in the middle of the screen and also have a drop down list inside of it. Is there a simple way to do this? I haven't been able to find any examples online or on SO. </p>
  
  <p>Here is what I have:</p>
  
  <pre><code>function showExportDialog() {
      console.log("In requestPanel.js ==&gt; showExportDialog()");
  
      //initialize and open the dialog
      var $dialog = $('&lt;div&gt;&lt;/div&gt;').dialog({
          title:   'Export Dialog',
          modal: true,   //dims screen to bring dialog to the front
          buttons: {
              'Export As CSV': function() {
                  exportAsCSV();
              },
              'Export As Tab Delimited': function() {
                  exportAsTabDelimited();
              },
              'Export As Plain Text': function() {
                  exportAsPlainText();
              }
          }
      });
  }
  </code></pre>
  
  <p>When this function is called a modal dialog appears with three buttons that look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/pusQb.png" alt="image"></p>
  
  <p>I am hoping for something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/GRhyP.png" alt="enter image description here"></p>
  
  <p>Any help would be appreciated. </p>