Image button to open as a popup for definition

Jump to solution
mitchellc
Community Member

This information may already be available but so far, I have not been able to find it. I am attempting to upload an image, make it a button, and when the student clicks on it, I want it to open a pop-up with a definition based on the image. So far, I have uploaded the image and added the text that I want to open in the pop-up, but I can't get the image to remain static and open to show the definition. I have manipulated the code and this is what I have so far:

<div id="dialog_for_link1" class="enhanceable_content dialog">A single parent family is defined as one adult and one or more children</div>
<p><img src="https://lisdtx.instructure.com/courses/161822/files/12587133/preview" alt=" " width="250" height="167" data-api-endpoint="https://lisdtx.instructure.com/api/v1/courses/161822/files/12587133" data-api-returntype="File" /></p>

I am not a trained coder but am learning as I go. I would appreciate any help in resolving this issue.

0 Likes
1 Solution
Chris_Hofer
Community Coach
Community Coach

Good evening, @mitchellc ...

Are you trying to create some kind of "lightbox" effect in your course?  You may have already seen this, but in case you haven't, I wrote a blog post back in 2016 that gives directions on how to accomplish something like this, and you might be able to do something similar for your needs: Lightbox Effect.  If you have any questions about my blog post, you can post your comments there, and I'll do my best to help answer.  Hope this will help you a bit!  Take care...

View solution in original post