单击按钮时jQuery ui对话框不起作用

Question

我正在尝试修改基于 bootstrap 和 jquery 的网页模板。我试图在page 中添加一个对话框，但它不起作用。 （这是在“Open Positions”部分不起作用的按钮）

您可以在下面下载我的文件。您可以查看 index.html 文件。

我从link添加了这个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并将所有脚本移至底部。