Chrome extension dialog opening in popup rather than the tab

I am making a chrome extension that uses a jquery dialog. When the dialog opens it opens and remains in the default_popup page and not the current tabs page. How can I make the dialog open in the tabs page?

Manifest:

  {
  "manifest_version": 2,

  "name": "Universal Wishlist",
  "description": "This extension allows you to save your favorite items from different places on the web in one place",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery.js", "popup.js", "jquery-ui.js"],
      "css": ["jquery-ui.css"]
    }
  ],
  "background": {
    "scripts": ["jquery.js"]
  }
}

popup js

document.addEventListener('DOMContentLoaded', function() {
  $('#add').click(function(){
    var dialog = '<div id="dialog" title="Basic dialog" style="display:none;"><p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the "x" icon.</p></div>';
    $('body').append(dialog); //this needs to be the tabs body, not the popups body
    $("#dialog").dialog();
  });
});