Spry Pop-up Dialog widget for Dreamweaver
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.
- Fully customisable through CSS.
- Apply links to individual items.
- Add custom icons.
- Combine with other Spry widgets for advanced user experience.
- Collapse or expand the entire tree at once.
- Retains the state of the sub trees while parent branch is collapsed or expanded.
- Have individual branches expanded by default.
You can edit the tree view using Properties Inspector or directly in the Design view as any regular unordered list.
Dreamweaver version Compatibility
- 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.
Spry Pop-up Dialog widget produces a dragable pop-up centered on the screen.
Looking for a context menu/toolip type of a pop-up? Spry Context Menu widget may better fit your needs.
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).
|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|
|Default pop-up with
||Go wild with CSS
|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 fileOn your web page select an element to trigger the pop-up (link, image or button) 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
- 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.
image as a background
|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?