There are hundreds of different lightbox and modal window effects already freely available online, so you're probably questioning why yet another one is needed. The difference with TopBox is that this modal window effect was written from scratch exclusively for RapidWeaver. It foregoes a lot of feature-bloat, complicated settings and totally cryptic code no one understands! TopBox is instead focused on delivering a basic, fast, reliable and highly customisable modal window. TopBox gives you the ability to create simple popup modal windows which can be customised to use the same colour scheme as your existing website. TopBox is perfect for displaying blocks of content, contact forms, links, pictures and even basic video.

Recently totally rewritten, TopBox 3 continues to strive over and beyond competing modal effects. This latest incarnation of TopBox is now 100% responsive and features impressive close / next / previous buttons which are easy for your end users to click. We've also tried to support even more content types, with emphasis on basic video support and improved contact form support.

Details about the TopBox 3 update can be found in this blog article.

Examples

Here are some working examples of the TopBox stack and details about how each was created.
 

Basic styled text

This is some example styled text content. In this instance we just dragged a normal Styled Text stack into the TopBox modal content region. The text stack had a white background applied, 20px of padding and 10px rounded corners. This proves that in just a few clicks you can achieve a really effective modal window.

Try resizing your browser window and notice how the open modal window scales and centres itself automatically on the screen without any ugly jumping or cropping effects; a common fault other modal window effects that 'pretend' to be responsive!

Warehoused photograph and caption content

This example was created by dropping a 1 column stack into the TopBox modal content region and applying a background and padding on it. The max-width setting was changed to 1250px to match the image width. An HTML code stack and HTML image tag was used to fetch a large image from a warehouse (which is preloaded before this TopBox opens). Finally a styled text stack was used to display written content below the image.

This caption content shown below the image could easily include links, icons or other basic HTML formatting. The advantage of TopBox is that you have complete freedom, with regards to how the modal window is laid-out. Simply drag and drop in an stacks you want shown in the modal, and reorder them ti suit your requirements.

Popup RapidWeaver contact form

You can easily achieve this same effect, simply by dragging and dropping a Styled Text stack into TopBox. To get the RapidWeaver contact form into your Stacks page, you need to use the PlusKit plugin (not included with TopBox) and add the special PHP prefix code to your page to start the contact form session. Most premium ThemeFlood themes apply Bootstrap 3 styling to the contact form, as in this example.

Single borderless photograph

This does as the name implies and displays a single photograph without any padding, borders or margin. Ideal if you want to put maximum emphasis on a special photograph.

You can either use an Image stack (remember to double-click the image in Stacks edit mode and remove sizing constraints) or do the same as this example and use an HTML code stack and HTML image tag, to fetch a large image from a warehouse.

Floating image and content

This example was created by dropping a left-floating stack in the TopBox modal content region. 5px rounded corners, 10px of padding and a solid white background colour were then applied on the floating stack. The TopBox was set to a max-width of 700px. All other settings were left as the defaults.

FreeStyle slideshow

Created simply by taking the free FreeStyle slideshow stack from this website and placing it within the TopBox modal content region. At this point you can create a simple slideshow that can elegantly cycle through a set of images; either manually using navigation buttons or automatically using timing.

This is actually a nice alternative to using the backwards / forwards navigation controls already provided in TopBox, and means that you could build an image gallery using just a single TopBox stack. Possibly you could swap FreeStyle for another slideshow stack or plugin if you wanted.

YouTube video

TopBox has basic video support. If a TopBox is closed before the video has finished playing, the video is automatically stopped. This example was created by using an HTML code stack in the TopBox modal content region. The max-width of the TopBox was set to 640px wide (the same width as the video). Standard YouTube video embed code was used, with the addition of https:// at the front of the URL (this means you can preview it offline).

This video content is not responsive, because providers like YouTube and Vimeo do not officially support responsive video embeds at this point in time. However presented at a width of 640px wide, most users will have no problem in viewing the video content. You could easily adjust the TopBox breakpoint setting to embed the video within the normal page flow on smaller screens less than 640px wide.

Image set

An example showing use of backwards and forwards navigation buttons, to cycle through a set of TopBox stacks. These backwards and forwards buttons can be turned on in the TopBox stack settings. They work simply by referencing the ID of the previous or next TopBox stack in the set. So this provides a basic method to navigate between multiple TopBox stacks.

Social networking panel

TopBox can be used to create your very own social networking or bookmarking widget, without reliance on outside companies or services. It wouldn't be difficult to @import the same stack into multiple pages in your website using PlusKit, and provide a link or button to open the TopBox.

This example was created simply by placing an HTML code stack in the TopBox modal content placeholder, to which some padding and a background was applied. Conveniently most premium ThemeFlood RapidWeaver themes already include Font Awesome icons, so at this point we could place the retina-enabled icons in the HTML code stack and apply links to them.

Newsletter signup form

Services like MailChimp provide you with the code to create simple mailing list signup forms on your website. Like in this example, this code can be placed within a TopBox modal window. It's a good way to keep the signup form out of the way, but still have it available to users via a link or button tied to this TopBox.

In this example, the signup HTML code was modified slightly to include some Bootstrap selector names. That way, the form can be 'prettified' more using Bootstrap styling.

Embedded PDF document

This example was achieved by taking the free Embed stack and placing it within a TopBox modal. The PDF file (stored in a separate warehouse) is then rendered within the modal popop.

Please note that there are massive inconstancies in the way different web browsers, devices and operating systems handle PDF files in webpages. Some will generate a live preview of the PDF (complete with controllers) whereas some may only render the first page of a document without scrolling capabilities or only display a download link. Therefore PDF support in TopBox should be considered experimental.
These are just some quick examples of what you can do with TopBox, to illustrate the basics of what it does and what you can use it for. The TopBox stack settings list many other options, like the ability to customise the window shade and colour scheme of the buttons. There are also likely to be many more content types that you can experiment with displaying in TopBox. It's therefore strongly recommended that you download the free demo version to try it yourself. You might be quite amazed at what you can build with TopBox.

Basic setup

We've always tried to keep the setup as simple as possible for all users, while at the same time providing functionality for more experienced users. Typically you can get a TopBox modal working within a page in under a minute...

  1. Open the stack elements library. Drag and drop a TopBox stack into your page.

  2. Drag and drop some content into the trigger region (optional) and drop some content into the TopBox region. You can use almost any type of content you want.

  3. For stacks placed inside the modal window, you may wish to apply a background fill, padding, margins, rounded corners or borders; using the normal stack settings.

  4. In the TopBox settings, increment the TopBox ID number, if another TopBox is already using the same ID on that page. It is important every TopBox has a unique ID, to prevent multiple TopBoxes getting triggered at the same time.

  5. Change any other settings in the TopBox stack settings if you prefer. For example. you can customise the style of your TopBox or any of the animation settings.

From this point onwards, you will have a basic TopBox working in your page. TopBoxes can be triggered via three methods, outlined below. When the page is printed or saved as a PDF, TopBox modal windows will be hidden from view, leaving just the triggers visible in the page flow.

Methods for triggering TopBox stacks

As discussed above, placing some content in the trigger region, shown in Stacks edit mode will create a trigger. Any content you place in this placeholder will display a pointer curser on hover. When the trigger region is tapped or clicked, that particular TopBox stack will open.

What if if you want to trigger a TopBox stack from elsewhere in a page? No problem; you can either apply a class selector name on an element or trigger the TopBox via an anchor link.

For the class selector method, add a class selector of topbox6 to any element in your page (like a button, a heading or a picture). Change the number to match the ID of the TopBox you want to trigger (so if you wanted to open TopBox 4 when the element was clicked, you would change 6 to 4). When that element is clicked or tapped, the desired TopBox will open. Here is what the typical code would look like for opening a TopBox modal using a class selector name:

<div id="myContent" class="topbox4">Open me!</div>
Anchor tags (links) provide another method of triggering a TopBox modal. Start by creating a new link anywhere in your page. Set the URL to #topbox5 (change the number to whatever TopBox you want to trigger). When the link is tapped or clicked, that particular TopBox will open. Here is what the typical code for an anchor link would look like:

<a href="#topbox4">Open me!</a>
The beauty of TopBox is that you can use a combination of any of the above trigger methods on the same page. So you can quite easily setup multiple buttons or links on the same page to open a particular TopBox modal. All of these trigger methods will result in clean, valid HTML markup.

You can trigger a TopBox stack to open when the page loads, by using a custom query string in the page URL. This is typically done by appending a question mark and the TopBox ID onto a page link like this:

<a href="http://stacks4stacks.com/topbox/?topbox1">Open TopBox1</a>
This link can be used in any pages or from locations like emails, Twitter, Facebook etc. However it should be noted that the TopBox will only fully display, once the entire page is loaded. This may make this method less suitable for slower-loading pages.

TopBox does not support the automatic opening of modal windows when the page is loaded (other than the partial method discussed above). For this task, you should instead use the Gateway stack which was specifically developed for this purpose and is engineered with essential features like cookie tracking. TopBox is intended for the manual triggering of simple modal windows only.

You may wish to use the free FlexiBox or RottenApple stacks to hide custom trigger buttons on smaller devices that fall below your breakpoint.

Responsive behaviour

Historically getting any sort of lightbox or modal window to work in responsive websites has proven to be an extremely difficult task to accomplish. Alongside the broad choice of different content types that a user might want to use in a modal, we also have to contend with numerous inconsistencies relating to how different web browsers and devices handle things like flexible sizing, scaling and positioning. TopBox bucks the trend and provides one of the most easiest and reliable solutions around for creating responsive modal windows.

The first stage is that you can specify a maximum width for the modal window in the stack settings. TopBox will not grow any wider than this size you specify. Unlike fixed widths, if the screen is not wide enough to display the full width of the modal window, then you will notice that is starts to reduce down in size. If the screen width falls below the breakpoint setting in the stack, then TopBox will be disabled and the content will instead be permanently displayed on the page.

In instances when content exceeds the height of the browser window, TopBox will fetch the height of the window and apply it to the TopBox modal container. Once this fixed height is applied, you should find that the TopBox content gains the ability to be scrolled vertically. So this removes the danger of content getting cropped.

Previous and next buttons

TopBox was primarily designed as a singular modal window with no interaction with other elements on the same page. However since version 2, we've been a bit cheeky and sneaked-in some basic support for next and previous navigation buttons, to make TopBox a bit more lightbox-ish! This came as a result of many feature requests from users wanting to abandon existing lightbox plugins and switch over to using TopBox full time.

In TopBox, the next and previous navigation buttons are not attained automatically like conventional lightbox plugins. Instead you need to switch them on in the stack settings. You also need to tell TopBox what neighbouring TopBoxes you want to link backwards or forwards to, using TopBox ID's. So it is certainly possible to create a 'set' of modal windows and link between them, but this needs to be setup manually in the stack settings. Ultimately if you have many dozens of images to 'lightbox', TopBox may not be best suited to your needs.

Stacks4Stacks

Stacks4Stacks provides quality stack elements for RapidWeaver, backed by fast and friendly expert support direct from the developer. All stacks are intended for use with the Stacks plugin and can be used in both fixed-width and responsive page layouts. These stacks can help you achieve new things in your web development projects, meet client objectives and basically get jobs done a whole lot faster! We provide a wide variety of both free and paid stack elements, suitable for various different tasks. Over the past few years, the Stacks4Stacks project has been responsible for bringing some of the most influential stack elements to RapidWeaver.

The entire Stacks4Stacks website was built using RapidWeaver and the Stacks plugin. The theme being used in this website is Volcano by ThemeFlood. Should you have any questions or comments about this website or any of the stack elements featured, please feel free to get in contact. Stacks4Stacks is hosted by the rather excellent Chillidog Hosting.

RapidWeaver is a registered trademark of Realmac Software LTD, Brighton, UK.



Top 10 Stacks4Stacks