How to use canvas built-in draggable dialog popup box

[z_dusatko]

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

[mwhite]

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.

[z_dusatko]

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.

[kenneth_larsen]

 @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]

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.

[kenneth_larsen · Accepted solution]

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.