cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
z_dusatko
Community Participant

How to use canvas built-in draggable dialog popup box

Jump to solution

Hello everybody,

this might be a newbie question, I am trying to use canvas built-in draggable dialog box, so far I figured out this:

this is a link to open a popup dialog box:

<a href="#" style="float: left;" class="media_comment_link media-comment">Media Comment</a>

this is the content that shows inside the dialog box

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" style="outline: 0px; z-index: 1002; height: auto; width: 560px; top: 560px; left: 297px; display: block;" aria-hidden="false">...</div>

so where can I find JS, jQuery or any script that is attached to this? I don't see any id attributes attached to these HTML elements, only class ones. Or is this managed by some ruby on rail code?

Thanks for any pointers,

Zbynek

1 Solution

Accepted Solutions

You can use the basic jQuery UI dialog (https://jqueryui.com/dialog/​) and it will inherit all of the styles from Canvas. The only issue is in timing the JavaScript call. You can find some code in one of the responses at Re: Targeting the iFrame using Javascript in the new UI  that will help you with timing if you decide to go this route.

View solution in original post

5 Replies
mwhite
Community Participant

Hey Zbynek,

I have implemented many of the built-in Canvas UI features, where are you finding the doc's for the draggable dialogue box? I am happy to help.

kenneth_larsen
Community Champion

 @z_dusatko ​, Do you have access to the global JavaScript file, or are you trying to just trying to see if you can use the code Canvas uses?

z_dusatko
Community Participant

Hi Matthew,

thanks for your reply, I found only this styling guide Canvas LMS , if there are any other doc's related to the Canvas front end I am not aware of them.

With regards,

Z.

Hi Kenneth,

thanks for your reply, yes we have access to the global JavaScript file and we will probably come up with some custom jQuery to add more functionality. It just seemed like a good idea to use native Canvas front end library to do that.

With regards,

Z.

You can use the basic jQuery UI dialog (https://jqueryui.com/dialog/​) and it will inherit all of the styles from Canvas. The only issue is in timing the JavaScript call. You can find some code in one of the responses at Re: Targeting the iFrame using Javascript in the new UI  that will help you with timing if you decide to go this route.

View solution in original post