Question

我坚持使用这个jquery对话框。我搜索了我的代码，但这并没有告诉我这里有什么问题。我有一个按钮，单击该按钮将显示教练名称列表。我想要的是当用户点击对话框的名称打开并显示一些数据时，基本上只是我拥有的另一个隐藏的div。但我的问题是，当点击名称时，对话框确实出现，但模态不起作用，没有样式，只是基本上打开其他框顶部的框。

我正在使用谷歌托管库下面是代码：

HTML

<div class="coaches">
    <h3>Head Coaches </h3> 
    <br />
    <p class="coach">Example Coach Text</p>
</div>

<br />

<div class="displayInfo">
    Example Text
</div>

脚本

$(".coaches").click(function () {

    $(".displayInfo").dialog({
        autoOpen: false,
        height: 450,
        width: 450,
        title: "Example Text",
        modal: true,
        // overlay: { backgroundColor: "#000000", opacity: 0.5 }
    });

    $(".displayInfo").dialog('open');

});

Answer 1

既然你说它确实出现了，我怀疑你忘了包含jQuery UI附带的CSS文件。请确保您包含CSS文件。至于Javascript问题，请删除最后, - 它会在Internet Explorer中造成破坏

Answer 2

在这段代码中你写的

    $(".displayInfo").dialog({
        autoOpen: false,
        height: 450,
        width: 450,
        title: "Example Text",
        modal: true,
       // overlay: { backgroundColor: "#000000", opacity: 0.5 }
    });

您是否忘记在,之后删除model: true？这不是JavaScript中的有效语法。

Answer 3

加载CSS时出现了一些问题。

您必须包含 jquery-ui.css

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

在您的文档<head>

中

<强> SEE FIDDLE DEMO

Jquery Dialog模态问题

3 个答案: