CODEWITHSUNDEEP
javascriptjqueryhtmlcss
RYDiiN
RYDiiN

Reputation: 299

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

Upvotes: 1

Views: 2552

Answers (2)

Kapil Kashyap
Kapil Kashyap

Reputation: 111

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.

Upvotes: 1

guest271314
guest271314

Reputation: 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>

Upvotes: 0

Related Questions