我收到一个错误“TypeError：$（...）。对话框不是一个函数”

Question

当我点击按钮时，我使用以下代码作为对话框的功能：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
 <link rel="stylesheet" type="text/css" href="/style/normalize.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">



<script type='text/javascript'>//<![CDATA[ 

$(function() {
    $('.checked').click(function(e) {
        e.preventDefault();
        var dialog = $('<p>Are you sure?</p>').dialog({
            buttons: {
                "Yes": function() {alert('you chose yes');},
                "No":  function() {alert('you chose no');},
                "Cancel":  function() {
                    dialog.dialog('close');
                }
            }
        });
      });
});

//]]>  

</script>

显示此错误

TypeError: $(...).dialog is not a function


"Cancel":  function() {

任何人都可以告诉我为什么我会收到错误，谢谢。