My legacy UI application has HTML popups that I'd like to convert to Modal popups in Javascript. Any pointers would be highly appreciated.
You can use an IFRAME with something like jquery's modal dialog. I usually find JavaScript modal popups are not entirely modal. E.g. they rely on CSS to position a container over the top of the screen to capture all non-dialog events, but keyboard access is usually still possible. This one is pretty robust though: http://www.ericmmartin.com/projects/simplemodal/
Using an IFRAME would be the easiest transition from real popups to pseudo JS popups as the documents served within the popup would require little modification if any.
Related
I have a list of elements that need to have a corresponding pop up for each element. This is not a pop up where the background is blacked. This is more like a javascript alert although I need to create my own styled button within the pop up with our own bespoke event assigned to it. I need each pop to position itself appropriately next to the relevant item within the UI.
Whats the best way to do this? Are there any examples please? I only want the pop up to show when the visitor triggers an event.
Many thanks,
I suggest you to use Colorbox for pop-up systems. Fırst of all; it is easy to learn and use.
And most importantly: Colorbox won't create conflicts with your other plugins (sometimes fancybox does that).
Some Features:
Supports photos, grouping, slideshow, ajax, inline, and iframed
content.
Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
Appearance is controlled through CSS so it can be restyled.
You can easily do this without using jQuery Plugins.
I put together a little example.
What about http://jqueryui.com/demos/dialog/#modal-confirmation
or http://jqueryui.com/demos/dialog/#modal-message
I'm creating a popup dialog using jQueryUI. I have run into problems because I'm using exactly the same blocks of HTML and JavaScript code as on the page. (The application was not designed for that and I'm not going to recode it deeply). So I have two tags with same ID attributes in the document - on the page and in popup.
To avoid this I decided to open the dialog in an iFrame. Everything works, of course, but the popup opens too slowly (it has a long list of JS and CSS files to load). They are in cache of course, but the browser seems to send requests to check them.
The question: can anything be done as a quick help? I can connect the parent window using Javascript, so can I somehow import, or clone (deep copy), for example, jQuery library? What do you think of it?
(Please don't blame me if the question is crazy)
You don't need to clone jQuery, you may use it also from within the frame.
parent.$('selector', document).someMethod()
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.
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.
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
There is a huge number of jQuery modal box plugins out there. Jitter lists 20 of them in this response (Modal windows plugin to rails).
Which one do you use and why? If you use different ones in different cases, how can they be broken down categorically by use-case?
I pick what I want based on its primary use. The fact that you can use a lightbox variant to show a dialog box, doesn't make it a good candidate in my mind.
Generally if I need to show photos or another iframed web page, I use a lightbox variant. Two that we have used at our studio and been happy with are:
Slimbox 2 (Just photos)
Colorbox (Pretty much any type of content)
For dialog type behavior, I highly recommend using jQuery UI's dialog. It is in active development, and is super customizable.
[rant] Whatever you do please don't use SimpleModal unless you need its special type of callbacks. Otherwise, when you try to hook into an onClose callback, you'll find yourself having to perform the actual closing of the box. Just my two cents on that one. :) I just know it has come up a few times here in SO, and it just feels awkward to use IMO [/rant]
I use Colorbox, it is because it is recommended alternative in non-maintained thickbox.
Basically it allows iframe, so image, flash etc are all okay. Also it is incentive for me to upgrade jQuery to 1.3.2 :-)
JQuery UI Dialog with a "plugin" to support iframes:
http://elijahmanor.com/post/jQuery-UI-Dialog-w-Resizable-iFrame.aspx
I use it because it's included in JQueryUI and uses the jquery ui theme you use, which makes for a consistent UI with little cost
I could write this, but before I do, I wanted to check to see if there are existing solutions out there since it seems a lot of websites already do this, so I was wondering if there was a quick way to do this.
Also, I am talking about "popout" windows, not "popup" windows. All JavaScript libraries support "popup" windows, but I want ones where they originally open as "popup" windows in the same browser window, but there is also a link to open them up in a brand new browser window.
Check out Cappuccino, it's more of a windowing framework than a web 2.0 framework. It's based off of Apples Cocoa, and uses a Superset of Javascript called Objective-J. Superset meaning that any JS is valid, but it extends on the language with additional syntax that is similar to Cocoa and Objetive-C.
http://cappuccino.org
var oDiv = document.getElementById('mydiv');
var oWindow = window.open("about:blank");
oWindow.document.body.appendChild(oDiv.cloneNode(true))
You will probably also need to move stylesheets there as well.
I don"t know a framework to do that for you. But the JS code to do that might be simple.
For the in-page-popup part, just open an absolute div. If you want the div to become a real popup, open a popup window then remove your div content from the main document and append it to the popup window document (you way have to clone it because JS may not like passing around DOM nodes between different documents).
JQuery - Look for Dialog.
http://docs.jquery.com/UI/Dialog
You can customize with CSS to control the title bar, if it can be moved or resized, etc.
PS: Follow the link for an example.
you can try http://mochaui.com/demo/, it's written in mootools