Creating a pop-up box when a certain word in text is clicked on

Question

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. 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!

Answer 1

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> 

Answer 2

You can use jQuery's modal dialog widget over here.

What you can do is keep track of all the words and its meanings in a JSON, like so:

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.

You can emulate a link using CSS for the span's, like so:

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

Now, the actual functionality would be provided using jQuery, like so:

$(".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

Hope this helps you out.