Un-obtrusive modal window in external site

Question

Sorry for the title.....bit difficult to word what I really want to ask.

Some websites allow a user to copy and paste some widget for use with their own site. For example, getsatisfaction. Yes, those feedback icons that I hope most of you see in various places.

If you have a look at twitterfeed, on the left there will be a feedback icon, once clicked on a nice modal window comes up. the modal windows content is in an iframe to an external source.

I really like this, but my question is:

I could do the same by using some jQuery library for the modal window and then linking the modal content to a site on my page, but how do I stop this from becoming obtrusive to a sites other javascript files?

For example, let's say i'm using my js code and the relevant jquery code, and i've minified it into one file. The user adds my widget to their site. If they're using jQuery, how do I make sure my code isn't going to interfere with theirs?

Would the best way be to use a modal window library which is not very popular?

Thanks very much. Hope that makes sense!

EDIT: I could write my own modal window functionality code, but i'd much rather use a library which already does it.

Answer 1

jQuery UI has very nice dialog components that should fit your purpose. Inside them you can instantiate an iframe. see:

http://elijahmanor.com/demos/jqueryuidialogiframe/index.html

If I understand all this correctly, the iframe content is a separate page, so there is no case where your javascript code in that page would interfere with the javascript of the calling page, but maybe I haven't understood that part correctly?

EDIT: I think I understand what you meant, in that you want to package up the code that you will write that opens the modal window with the iframe. SO you want to make sure that this code does not interfere with existing jQuery code that the user is using.

I think this is a good use case for a jQuery plugin. This way the user of the page can use your function like any jQuery function, so less likelyhood of collisions

Answer 2

You can dynamically load jQuery only if it is needed.

First check for the existance of the jQuery object. If not add the script tag.

There are some challenges to this, as there is no onload event when adding a script tag to a page, that works consistently accross browsers, so you will have to poll to see if it fully loaded, and only then run your code.

There is an article on how to do this: http://www.squidoo.com/load-jQuery-dynamically

You may still have an issue if the user has a differnt version of the jquery library though, although you can probably get around this with some additional checks.