Question

我正在我的博客上工作，不知道如何制作一个突出显示我文字某些部分的javascript并提供更多信息。像：

我正在使用我的电脑

如果我点击个人电脑，则会在Jquery UI对话框中显示一个窗口和更多信息。

我自己尝试过，但我必须为我想要的每一个信息创建一个div。然后我就可以用

打开一个盒子了

$(foo).dialog('open')

这是我想的很多。你能给我一个简单的解决方案吗？

Answer 1

很难说你真正需要什么。下次你应该提供更多的代码...但我会试一试：我不知道你如何提供你的文字的亮点，但我认为this demo可以帮助你。

HTML：

<p> Text blabla
<span data-title="Title 1" data-text="Text 1" class="a2u">Highlight 1</span>
more blabla
<span data-title="Title 2" data-text="Text 2" class="a2u">Highlight 2</span>
more blabla
<span data-title="Title 3" data-text="Text 3" class="a2u">Highlight 3</span>
more blabla
</p>

使用Javascript：

$().ready(function() {
    $("#alert2ui").dialog({
        autoOpen: false
    });
    $(".a2u").click(function() {
        $("#alert2ui").dialog("option", "title", $(this).attr("data-title"));
        $("#alert2ui").html($(this).attr("data-text"));
        $("#alert2ui").dialog('open');
    });
});

按照给定的css class突出显示您的文字，并使用html5 data-*属性设置详细信息。

突出显示部分文本并显示信息对话框？

1 个答案: