点击文本特定词汇时，带注释的弹窗框显示异常问题求助

API 探路者

2026-8-5

问题描述

我想在网站实现点击文本特定词汇弹出注释弹窗的功能，找了Stack Overflow上的示例代码测试，却遇到了问题：

Firefox中点击红色词汇后，仅显示注释文本，弹窗边框不显示，但仍能拖拽区域并通过右侧小白点关闭；
Chrome中弹窗完全不显示。
我怀疑是jQuery 2.1.4和jQuery UI的版本兼容性问题，换了多个jQuery UI版本后问题依旧，求解决办法或更合适的实现方案。

测试代码如下：

原测试代码

CSS

.content span {
    text-decoration: underline;
    color: #da2f47;
    cursor: pointer;
}

HTML

<h4><b>Lorem</b></h4>
<div class="content">
<p style="text-align:left;">Lorem ipsum <span>dolor</span> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut <span>labore</span> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <span>voluptate</span> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="dialog" title=""></div>

JavaScript

var explanations = {
    "dolor": "Explanation about dolor.",
    "labore": "Explanation about labore.",
    "voluptate": "Explanation about voluptate."
}; 

$(".content").on("click", "span", function(e) {
    e.stopPropagation();
    var $this = $( this ),
        _text = $this.text();

    var dialogContent = explanations[_text.toLowerCase()];
    if(dialogContent && dialogContent.length > 0) {
        $( "#dialog" ).dialog({
            "modal": true,
            "title": _text
        }).html(dialogContent);
    }
});

解决办法

一、修复原jQuery UI方案的问题

你的核心问题是缺少jQuery UI的样式文件，以及初始化逻辑的小问题，按以下步骤修改：

引入匹配的jQuery UI样式
jQuery UI的dialog组件依赖官方提供的CSS样式，你只引入了JS文件导致弹窗没有UI框架，显示异常。需要在HTML中添加对应版本的样式链接，比如和jQuery 2.1.4匹配的jQuery UI 1.11.4：
```
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
```
注意：样式和JS版本要对应，避免兼容性问题。

调整JS初始化逻辑
每次点击都调用dialog()会导致重复绑定DOM事件，改成先销毁再初始化，避免冲突：

if(dialogContent && dialogContent.length > 0) {
    $("#dialog").dialog("destroy").dialog({
        "modal": true,
        "title": _text
    }).html(dialogContent);
}

确认引入顺序
确保资源引入顺序正确：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- 再引入jQuery UI -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- 最后引入你的自定义JS -->
<script>/* 你的代码 */</script>

二、轻量替代方案（不依赖jQuery UI）

如果不想引入jQuery UI，完全可以自己实现一个弹窗，更灵活且无依赖问题：

1. 自定义CSS

.content span {
    text-decoration: underline;
    color: #da2f47;
    cursor: pointer;
}
/* 弹窗遮罩 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
}
/* 弹窗容器 */
.custom-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    padding: 20px;
    min-width: 250px;
    z-index: 1000;
    display: none;
}
/* 弹窗标题 */
.custom-dialog .dialog-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}
/* 关闭按钮 */
.custom-dialog .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 18px;
    color: #999;
    cursor: pointer;
}
.custom-dialog .close-btn:hover {
    color: #333;
}

2. 修改HTML

在原HTML末尾添加弹窗结构：

<div class="modal-overlay"></div>
<div class="custom-dialog">
    <span class="close-btn">&times;</span>
    <div class="dialog-title"></div>
    <div class="dialog-content"></div>
</div>

3. 自定义JS逻辑

var explanations = {
    "dolor": "Explanation about dolor.",
    "labore": "Explanation about labore.",
    "voluptate": "Explanation about voluptate."
}; 

// 点击词汇显示弹窗
$(".content").on("click", "span", function(e) {
    e.stopPropagation();
    var text = $(this).text();
    var content = explanations[text.toLowerCase()];
    if(content) {
        $(".dialog-title").text(text);
        $(".dialog-content").text(content);
        $(".modal-overlay, .custom-dialog").show();
    }
});

// 关闭弹窗
$(".close-btn, .modal-overlay").on("click", function() {
    $(".modal-overlay, .custom-dialog").hide();
});

内容的提问来源于stack exchange，提问作者Martrin

点击文本特定词汇时，带注释的弹窗框显示异常问题求助

问题描述 #

原测试代码 #

CSS