Spry Pop-up Dialog widget for Dreamweaver

Home Extensions / Components Software Contact Linecraft Blog Services Portfolio Product Updates/ Customer Log-in

Spry Pop-up Dialog widget

Spry Pop-up Dialog is a user interface widget powered by Adobe Spry framework. When added to a page the widget will produce a centered AJAX pop-up box - a container for your forms, database records, page dialogs, images, Flash or any other content of your choice.
Initially invisible, it can be displayed when a user clicks a link or a button on a web page or immediately after the page loads in the browser. To dismiss it user can click the "close" link located on title bar of the pop-up widget or simply click away from the pop-up.

Key Benefits

Use with various types of content: iframes, images, web forms, etc.
Put your message across and bypass those overzealous pop-up blockers.
Create custom dialog boxes (such as alert or confirmation box) that are visually attractive and have user-defined labels (not just "OK" or "Cancel").
Keep your your interface organized and display content only when it's needed.

Although this widget is independent from our Spry Data Utilities Toolkit, it's been designed to work successfully inside your Spry-driven Rich Interface Application. An overlaying "create" or "update" record form, or a Details region containing additional information are just a few examples of such use.

Please note: this extension is compatible with Dreamweaver CS4 and CS5 ONLY!!!

Main features overview

Feature	Set in...	Can be turned-off
Pop-up can be dragged by the "title" bar.	Properties Inspector
Disable page scrolling when the pop-up is open. Alternatively you can have the pop-up retain its position while the page is being scrolled ("sticky note" mode).	Properties Inspector
Built-in "fade" effect. Fades-in the pop-up when it opens and fades-out when it disappears.	Properties Inspector
Modal window mode. When this option is selected a user will not be able to interact with the rest of the page using mouse until the pop-up is closed from within itself. When the option is turned-off clicking away from the pop-up will make it disappear.	Properties Inspector
Scrollable box inside the pop-up. (scrollbars appear when the dimensions of the content exceed the dimensions of the pop-up) -"iframe-like" mode.	CSS Styles panel
Drop-shadow (color and transparency controlled through CSS).	CSS Styles panel
Semi-transparent background covering the content of the page (color and transparency controlled through CSS) under the pop-up.	CSS Styles panel
Close pop-up button.	Design or Code view

Examples

Default pop-up with scrollable content	Custom dialog (this is not Flash!)	Go wild with CSS	Modal custom confirmation box

Full size image viewer. Same pop-up can be reused for multiple images. In this example pop-up dragging is turned-off.

Extension comes with the source files for all the examples above.

Accessing the Widget and the Help file

On your web pager select an element to trigger the pop-up and click the button or the menu item on the Insert bar to add the widget to the page. If you do not select a trigger prior to adding the widget both widget and the placeholder trigger link will be added to the page at the cursor insertion point.

Accessing Spry Pop-up Dialog widget from Spry tab of the Insert bar

Accessing Help file in Spry Pop-up Dialog Properties Inspector

Browser Compatibility

Internet Explorer 6 and higher
Firefox 3 and higher
Netscape 7 and higher
Safari 3 and higher
Opera 9 and higher
Google Chrome 1 and higher
SeaMonkey 2 and higher

POPUP DIALOG TITLE

This is what Spry Pop-up Dialog widget looks like by default.
This widget can be dragged around the visible area on the screen.
It will retain its position while being hidden and reappear on the same spot when you open it again.
This instance is set to retain its position when the page is scrolled - go ahead try to scroll the page to observe the behavior.
The scrolling of the page while the pop-up is open can also be disabled by selecting the corresponding option in the Spry Pop-up Dialog Properties Inspector.
"Fade" effect has not been applied to this pop-up instance. As the amount of content exceeds the dimensions of the pop-up, it will appear inside a scrollable box. This is NOT an iframe, although an iframe could also reside inside this pop-up.
The pop-up will disappear if you click away from it. You can also close it by clicking the "button" in the top right corner.

This pop-up is using
image as a background

Full size image viewer

Confirmation

This is a custom "confirmation" box designed to mimic the one on Windows XP. The labels on the buttons is not the only feature you can customize. In fact you use any other HTML elements required for your task. Scripting logics can be added to each element separately which allows for more design flexibility.

Would you like to see this message again?

Name:
Email:
Message: