I am in love with stackoverflow’s single-color “click-to-close’ hovering dialog boxes that greet a user when they try to vote and aren’t logged in or use the site incorrectly. Any idea how and/or what technology Jeff used to implement these neat little devices?
EDIT: I’m specifically talking about the SQUARE dialog boxes that say “Click To Close” on them. I know how to implement the rectangular strip on the top of the screen.
look at the source code? they don't seem too complicated
I'm having a hard time finding the actual code for the dialog boxes I'm referring to, could you post the code?
Reading the source is tough with all the minification, but you can get some clues. For example, the flag link for your question is an anchor with id "flag-post-758906". I suggest searching question.min.js for the string "flag-post" and seeing what you'll find (as I don't have room in this comment)
Hey Paolo. I wasn't asking about the messages that get shown on the top of the screen. I know how to do that. I was asking about the messages that appear when a user tries to vote and is not logged in, etc.
you can un-minify the script by using this tool elfz.laacz.lv/beautify
You can use the jQuery library in conjunction with jQuery UI to create dialogs.
Although I was under the impression they used jQuery’s UI Dialog for this, I am not too sure anymore. However, it is not too difficult to whip this up yourself. Try this code:
With these styles:
And click here to see it in action.
However, I think you’d still need to tweak it a little bit to give it the right positions depending on the situation in which you are using it. I took care of this for the left position because it is working for the top, but I think there may be some situations in which it won’t. All things considered, this should get you started. If you want a more robust implementation, you should check out jQuery BeautyTips which is really awesome and would make this trivial to implement.