[英]Creating a pop-up box when a certain word in text is clicked on
I am currently working on making a textbook into a website for my teacher and I have run into a problem. 我目前正在为我的老师制作一个教科书成网站,但遇到了问题。 I have a div that contains text in a foreign language.
我有一个div,其中包含外语文本。 Some, but not all of these words are going to be click-able which will result in a pop up box appearing with the word's translation.
这些单词中的一些(但不是全部)将是可单击的,这将导致出现一个带有单词翻译的弹出框。 I do not know how to create something like this.
我不知道如何创建这样的东西。
Thank you! 谢谢!
Try creating an object having properties same as one of the translation items , when element clicked select property of object having translation text, alert value of property within object 尝试创建一个具有与翻译项之一相同的属性的对象,当元素单击时,选择具有翻译文本的对象的属性,该对象内的属性的警报值
var words = { "salve": "hello" }; var elems = document.getElementsByTagName("a"); Array.prototype.slice.call(elems).forEach(function(el) { el.onclick = function(e) { e.preventDefault(); alert(words[this.hash.slice(1)]) } })
<div> text <a href="#salve">salve</a> </div>
You can use jQuery's modal dialog widget over here. 您可以在此处使用jQuery的模式对话框小部件。
What you can do is keep track of all the words and its meanings in a JSON, like so: 您可以做的就是跟踪JSON中的所有单词及其含义,如下所示:
var messages = {
"lorem": "Explanation about Lorem.",
"dolor": "Explanation about dolor."
};
And create your markup in such a way that your words are distinguishable, like so: 并以可区分您的单词的方式创建标记,如下所示:
<div class="content">
<span>Lorem</span> ipsum <span>dolor</span>.
</div>
<!-- will be used by jQuery's dialog widget. -->
<div id="dialog" title=""></div>
I have wrapped 'Lorem' and 'dolor' with span container. 我已经用span容器包装了“ Lorem”和“ dolor”。
You can emulate a link using CSS for the span's, like so: 您可以使用跨度的CSS模拟链接,如下所示:
.content span {
text-decoration: underline;
cursor: pointer;
}
Now, the actual functionality would be provided using jQuery, like so: 现在,将使用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);
}
});
I have created a quick demo over here 我在这里创建了一个快速演示
You can explore jQuery's Dialog Widget API here 您可以在此处探索jQuery的Dialog Widget API
Hope this helps you out. 希望这可以帮助你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.