javascript - 当点击文本中的某个单词时创建一个弹出框

Question

我目前正在为我的老师将一本教科书制作成一个网站，但我遇到了一个问题。我有一个包含外语文本的 div。一些但不是所有这些词都可以点击，这将导致出现一个弹出框，其中包含该词的翻译。我不知道如何创建这样的东西。

谢谢!

Answer 1

您可以在此处使用 jQuery 的模态对话框小部件。

您可以做的是跟踪 JSON 中的所有单词及其含义，如下所示:

var messages = {
    "lorem": "Explanation about Lorem.",
    "dolor": "Explanation about dolor."
};

并以这样的方式创建您的标记，使您的文字易于区分，如下所示:

<div class="content">
    <span>Lorem</span> ipsum <span>dolor</span>.
</div>
<!-- will be used by jQuery's dialog widget. -->
<div id="dialog" title=""></div>

我用 span 容器包装了“Lorem”和“dolor”。

您可以使用 CSS 为 span 模拟链接，如下所示:

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

现在，实际的功能将使用 jQuery 提供，如下所示:

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

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

我已经通过 here 创建了一个快速演示

您可以探索 jQuery 的 Dialog Widget API here

希望这对你有帮助。