Jquery Dialog模式问题

Jquery Dialog modal issues

本文关键字：问题 模式 Dialog Jquery      更新时间：2023-09-26

我被这个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');
});

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

在这里编写的这段代码中，

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

你忘了在model: true之后删除,吗？这不是JavaScript中的有效语法。

加载CSS时出错。

您必须包含jquery-ui.css

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

在您的文档<head> 中

查看FIDDLE演示

相关文章：