Pop Box Magic (PBX) by PVII

Features

  • Visual user interface (UI) inside Dreamweaver.
  • Position your Popup to the right or left of its trigger link, or at your cursor. You can even set a vertical and/or horizontal offset.
  • Responsive, mobile-friendly, and adaptive. PBX will always ensure that your Popups fit the window or device being used... automatically.
  • Option to open the Pop Box on page load, with a user defined delay.
  • Set a Max and Min width for each Popup Box.
  • Pop Boxes can contain any type of content you need: plain text, images, forms, videos, maps, and more.
  • Add as many instances as you want to your page and style each one independently.
  • Use existing links and images for triggers, or have PBX create the links for you.
  • Style trigger links automatically in the PBX UI. Choose from several themes and attributes.
  • Trigger links can be styled text or buttonized, displayed inline, or blocked on separate lines.
  • Style your Popup Boxes from several available themes and attributes.
  • Triggers and Popup boxes can be assigned a User Class of your choice in the UI, allowing total design flexibility.
  • Choose a white or black close button, positioned at the top right corner of your Popup Box.

Introduction...

Pop Box Magic (PBX) allows you to attach a responsive popup box to any link on your page. Links can be text or images. The PBX interface allows you to style the trigger link and the popup box however you want. You also have a choice in how your popups are activated. By default, activation is via mouse over, but you can also set activation to click. If mouse-over is set, activation on a touch device will continue to work with a normal finger tap. Hover over (or tap) this PBX Trigger to popup the first example.

The User Interface

Mouse over or tap the screen capture below to see more information. The Popbox will open at your cursor position.

PopBox User Interface

Imagine the possibilities...

Use the links below to view Pop Box Magic examples. Experience the power that only a PVII Dreamweaver extension can provide! For consistency, all triggers below are optionally set to operate on mouse over, or tap on a touch device (Trigger action can also be set to click only).

Simple Text

Configure your Pop Box to display as a classic tool tip. The trigger link below is buttonized, rounded, and set to animate.

Display Simple Text

Images

Pop Boxes can contain images! The trigger link below is set to Text-Light.

Display an Image

Pop Box Centered

This mode will center the Pop Box in your viewport. It is recommended that when using the centered option, you set your trigger to click.

Centered - Click Only

Multi-Column Pop Box Content

The content inside your Pop Box can be styled any way you like. In the following example, we used Quick Grid Magic to create a 2-column structure.

Using Quick Grid Magic Inside Pop Box

Pop Up a Video in Lightbox Mode

As described in the features list, PBX supports any type of content, including iframe-based videos and Google maps. The following example pops up a video in a PBX Lightbox window. The trigger is set to work on click or tap. A the Pop Box will stay open until you either click the close icon, press your ESC key, or click somewhere on your window off the box.

The Beatles: You Can't Do That

Closing Thoughts

These examples serve to illustrate some of the things you can do with Pop Box Magic. What you can actually do is limited only by your imagination. Virtually anything is possible! Need to display a Google Map? No problem. A contact form? Piece of cake. Pop Box Magic is another PVII tool that makes Dreamweaver better.

Close

Nested Trigger

This Pop Box, as well as the ones nested inside, are activated on mouse over (hover). You can also set your Pop Boxes to open on click only. On touch devices, a simple tap is ll that is needed, no matter what. When nesting PBX, remember to keep the trigger behavior consistent. If enabling mouse over on the parent, do so on all nested instances, as well.

Close

Additional Nested PBX

You can easily add nested Popup Boxes to any existing Popup Box. Add as many as you like and nest as deeply as you need to. When nesting, make sure to leave the Show Only One Popup at a time option unchecked on the all nested instances.

Close

Pop Box Magic is easy to customize, and also comes with several themes that can be set in the user interface.

Close

Use PBX to display simple text Popups in a tooltip-type manner.

Close

The PBX UI gives you complete control over the appearance and positioning of each Pop Box instance on your page. Options and settings can be edited at any time. Easy to use and unprecedented power. PVII makes Dreamweaver magic.

This Popup Box is set to appear at your cursor (or your finger).

Close

Display an Image...

Close

This mode will center the Pop Box in your viewport. It is recommended that when using the centered option, you set your trigger to click. And remember, you can add any kind of content you need.

Close

A Pop Box in Lightbox mode will always stay open until you either click the close icon, press your ESC key, or click somewhere on your window off the box.

Close

Adding Columns

Your PBX boxes can be styled any way that you need them to be. Content is edited in Dreamweaver Design View and you are free to style the content as you wish.

Quick Grid Magic

In this example, we used Quick Grid Magic to easily add a responsive 2-column structure inside the Pop Box.