adding jquery ui to wordpress site - wordpress

Question

I would like to use http://jqueryui.com/dialog/ on my wordpress site but I can't figure out how to add it.
I created a file Chameleon/js/popup.js with the code:
jQuery(document).ready(function($) {
$( "#dialog" ).dialog();
});
Then I added to functions.php
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'popup', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/popup.js', // this is the location of your script file
array(' <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">') // this array lists the scripts upon which your script depends
);
and in my post template I added the code:
<div id="dialog" title="Basic dialog">
<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>
but it doesn't work.

Answer 1

add path as like this
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_style( 'themeslug-jquery-css', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );
wp_enqueue_style( 'themeslug-stylesheet', get_template_directory_uri.'/resources/demos/style.css' );
wp_enqueue_script( 'themeslug-popup', get_template_directory_uri() . '/js/popup.js', array('jquery'), '' );
wp_enqueue_script( 'themeslug-jquery-main', '//code.jquery.com/jquery-1.10.2.js', array('jquery'), '' );
wp_enqueue_script( 'themeslug-jquery-ui', '//code.jquery.com/ui/1.11.2/jquery-ui.js', array('jquery'), '' );
}