Javascript 为什么我的jQuery对话框没有打开？

我得到了一些代码，可以添加到我正在构建的电子邮件应用程序中，这样当有人单击“预览”按钮时，就会弹出一个对话框，显示电子邮件中显示的文本。我只使用JavaScript编程了大约一个星期，我已经尽了最大努力研究jQuery对话框的工作原理，但就我的一生而言，我就是无法在点击按钮时打开它

这是我得到的两个功能：

<script>
$("#loadPreviewDiv").dialog({
    autoOpen : false,
    resizable : true,
    height : 600, //adjust accordingly
    width : 600, //adjust accordingly
    modal : true,
    buttons : {
        close : function() {
            $(this).dialog("close");
        }
    },

});

function loadPreviewView() {
    document.getElementById('loadPreviewDiv').innerHTML = 'htmlBody.innerHTML';
    $("#loadPreviewDiv").dialog("open");
} </script>

这是我打开对话框的按钮：

<button type="button" onClick="loadPreviewView()">Preview</button>

我知道正在调用loadPreviewView函数，但是对话框没有弹出。我错过了什么

 $("#loadPreviewDiv").click(function () {
    $('#dialog').dialog({
        title: "Dialog box",
        height: 300,
        modal: true,
        open: function (event, ui) {
        },
        buttons: { "close": function() { $(this).dialog("close"); } } 
    });
 });

演示：

---

您正在加载jquery和jquery ui库吗？浏览器调试工具中的JavaScript控制台上是否有任何错误？是的，我在文档的开头部分有这两个库的语句。我没有看到$document.ready，必须在$document.ready内初始化对话框吗？如果不是的话，jQuery在被调用时可能还没有被初始化。您能用JSFIDLE重新生成它吗？