title: How to Insert Popup box shortcode in wordpress
body: <p>I create a Tinymce Popup box for inserting shortcode on content area in wordpress. When I click shortcode button then popup box open successfully with input field. But when I click popup box insert button then noting happen. I search on google and try so hard but I can't find out the problem. Please, anyone can help me. In the following is my popbox code:  </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Insert Button&lt;/title&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="../../wp-includes/js/tinymce/tiny_mce_popup.js"&gt;&lt;/script&gt;
  &lt;style type="text/css" src="../../wp-includes/js/tinymce/themes/advanced/skins/wp_theme/dialog.css"&gt;&lt;/style&gt;
  &lt;link rel="stylesheet" href="includes/css/friendly_buttons_tinymce.css" /&gt;
  
  &lt;script type="text/javascript"&gt;
  
  var ButtonDialog = {
      local_ed : 'ed',
      init : function(ed) {
          ButtonDialog.local_ed = ed;
          tinyMCEPopup.resizeToInnerSize();
      },
      insert : function insertButton(ed) {
  
          // Try and remove existing style / blockquote
          tinyMCEPopup.execCommand('mceRemoveNode', false, null);
  
          // set up variables to contain our input values
          var url = jQuery('#button-dialog input#button-url').val();
          var text = jQuery('#button-dialog input#button-text').val();
          var size = jQuery('#button-dialog select#button-size').val();
          var color = jQuery('#button-dialog select#button-color').val();      
          var style = jQuery('#button-dialog select#button-style').val();      
          var align = jQuery('#button-dialog select#button-align').val();      
  
          var output = '';
  
          // setup the output of our shortcode
          output = '[button ';
              output += 'size=' + size + ' ';
              output += 'style=' + style + ' ';
              output += 'color=' + color + ' ';
              output += 'align=' + align;
  
              // only insert if the url field is not blank
              if(url)
                  output += ' url=' + url;
          // check to see if the TEXT field is blank
          if(text) {  
              output += ']'+ text + '[/button]';
          }
          // if it is blank, use the selected text, if present
          else {
              output += ']'+ButtonDialog.local_ed.selection.getContent() + '[/button]';
          }
          tinyMCEPopup.execCommand('mceReplaceContent', false, output);
  
          // Return
          tinyMCEPopup.close();
      }
  };
  tinyMCEPopup.onInit.add(ButtonDialog.init, ButtonDialog);
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="button-dialog"&gt;
          &lt;form action="/" method="get" accept-charset="utf-8"&gt;
              &lt;div&gt;
                  &lt;label for="button-url"&gt;Button URL&lt;/label&gt;
                  &lt;input type="text" name="button-url" value="" id="button-url" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for="button-text"&gt;Button Text&lt;/label&gt;
                  &lt;input type="text" name="button-text" value="" id="button-text" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for="button-size"&gt;Size&lt;/label&gt;
                  &lt;select name="button-size" id="button-size" size="1"&gt;
                      &lt;option value="small"&gt;Small&lt;/option&gt;
                      &lt;option value="medium" selected="selected"&gt;Medium&lt;/option&gt;
                      &lt;option value="large"&gt;Large&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for="button-style"&gt;Style&lt;/label&gt;
                  &lt;select name="button-style" id="button-style" size="1"&gt;
                      &lt;option value="less_round"&gt;Less Round&lt;/option&gt;
                      &lt;option value="round" selected="selected"&gt;Round&lt;/option&gt;
                      &lt;option value="square"&gt;Square&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for="button-color"&gt;Color&lt;/label&gt;
                  &lt;select name="button-color" id="button-color" size="1"&gt;
                      &lt;option value="gray" selected="selected"&gt;Gray&lt;/option&gt;
                      &lt;option value="blue"=&gt;Blue&lt;/option&gt;
                      &lt;option value="red"&gt;Red&lt;/option&gt;
                      &lt;option value="green"&gt;Green&lt;/option&gt;
                      &lt;option value="black"&gt;Black&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for="button-align"&gt;Alignment&lt;/label&gt;
                  &lt;select name="button-align" id="button-align" size="1"&gt;
                      &lt;option value="gray" selected="selected"&gt;None&lt;/option&gt;
                      &lt;option value="left"=&gt;Left&lt;/option&gt;
                      &lt;option value="right"&gt;Right&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div&gt;   
                  &lt;a href="javascript:ButtonDialog.insert(ButtonDialog.local_ed)" id="insert" style="display: block; line-height: 24px;"&gt;Insert&lt;/a&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>