cancel
Showing results for 
Search instead for 
Did you mean: 
olexar
Community Member

Open link in overlay?

Jump to solution

Hey folks. Is it possible to have links to an image open in-front of a page? I don't know the correct terminology, but I'd like links to open the way that clicking Image 1 in Embedding a webpage in an assignment (iframes)​ opens. I should mention that I am comfortable using the HTML editor. Thanks in advanced for any help!

Tags (3)
1 Solution

Accepted Solutions
canvas_admin
Community Member

Richard,

It's not exactly an overlay but you may be able to do what you're hoping to accomplish by using a pop-up dialog box.  Here's a page that discusses various enhancements, including pop-up dialog boxes:  Using jQuery without Custom Javascript

Here's the section from that document:

  • Popup Dialog - See this in action here. Just FYI, the popup is defined as only being 300px wide. The class defining this width is ui-dialog. If you figure out how to adjust the width with or without additional Javascript/CSS I'd love to know! I have not tested this on Mobile. I do not know how this will appear to Students using the Canvas App.

<div id="dialog_for_link1" class="enhanceable_content dialog">dialog for link 1</div>

<a href="#dialog_for_link1" id="link1">link 1</a>

Additionally, this discussion may also help you even if you're not looking to accomplish it within a quiz: Re: Image popup inside a quiz question

View solution in original post

5 Replies
canvas_admin
Community Member

Richard,

It's not exactly an overlay but you may be able to do what you're hoping to accomplish by using a pop-up dialog box.  Here's a page that discusses various enhancements, including pop-up dialog boxes:  Using jQuery without Custom Javascript

Here's the section from that document:

  • Popup Dialog - See this in action here. Just FYI, the popup is defined as only being 300px wide. The class defining this width is ui-dialog. If you figure out how to adjust the width with or without additional Javascript/CSS I'd love to know! I have not tested this on Mobile. I do not know how this will appear to Students using the Canvas App.

<div id="dialog_for_link1" class="enhanceable_content dialog">dialog for link 1</div>

<a href="#dialog_for_link1" id="link1">link 1</a>

Additionally, this discussion may also help you even if you're not looking to accomplish it within a quiz: Re: Image popup inside a quiz question

View solution in original post

canvas_admin
Community Member

Richard,

You may also find this comment helpful as another way to get something similar: https://community.canvaslms.com/message/32479#comment-32479

Thanks! I'm running into a little problem now. The more I look at these threads, the more I want to try. :smileymischief:

I understand!  It's quite addicting.  :smileydevil:

olexar
Community Member

is now open for voting!