單擊按鈕時，jQuery ui對話框不起作用

Question

我正在嘗試修改基於引導程序和jquery的網頁模板。 我試圖在此頁面中添加一個對話框，但無法正常工作。 （這是在“未結頭寸 ”部分中不起作用的按鈕）

您可以在下面下載我的文件。 您可以檢查index.html文件。

我從鏈接添加此javascript

$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
    });
});

並為該javascript添加了以下幾行：

<div id="dialog" title="Contact Us">
    <p>info@info.info</p>
</div>
<button id="opener">Open Dialog</button>

為什么不起作用？

另一個問題; 而不是使用此jquery ui組件，我如何從“打開職位”部分跳轉到“聯系我們”部分的內容？ 我也想知道，因為它們都在同一個html文件中。

Answer 1

你試過show嗎？

$( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "show" );
});

在文件中出現錯誤：對CSS的引用不正確：

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

---

造成問題的原因是對jQuery的兩次額外引用。 請刪除其他版本的jQuery，並將所有腳本移到底部。