€0.00 *

Prices incl. VAT and shipping

Available as instant download

  • HRIT10012
DD_PushUpBox provides three functions for Modal actions DD_PushUpContent This function... more
Product information "PushUpBox" jQuery Plugin

A lightweight jQuery based div overlay box (Modal Box) for displaying content like (html, CMS modules, etc...) over the web page. A Modal- PopUP called PushUpBox.


The Community-based Version with the basic functions.

DD_PushUpBox provides three functions for Modal actions

This function is to push custom content to the PushUpBox it expects two parameter:

content the content to push as text or html
contentTitle the title for the box
DD_PushUpContent(content, contentTitle)

This function is to move the content from an sepcific id to the PushUpBox. It expects two parameter:

contentID the id to push
contentTitle the title for the box
DD_PushUpID(contentID, contentTitle)

DD_PushUpID has a special handling. It moves the html of the content ID to the PushUpBox and after closing the Box, it moves back.

For this, we provide a css class to make the push related id content invisible.


(For example, to provie a invisible login module to the site, which should be placed to the pushUpBox when be called by DD_PushUpID, like a login pop up. It's usefull when you use a CMS like Joomla, Wordpress etc... So you can place the login module or any other module to the bottom of your site, give them the .dd_pushupbox class to make it invisible and a custom id for the DD_PushUpID function, to trigger the login PopUp. Thats all, it has never been easier to switch any module, div container etc ... to a PopUp Box. Just push it up ;).

This function is to close PushUpBox and kick back any pushed ID if pushed.


Other Features:

  • Close the PushUpBox by clicking outside the box or pressing the Escape button.
  • Some settings and CSS adjust functions (See Configuration at dd_pushupbox.js).
  • Minified CSS and compressed JS Versions.
  • Compatible with any jQuery Version.
  • Support all major web browsers.

Community-Edition Support, we only give support indirectly. Only issue support via GitHub and the community!

Direct support for "PushUpBox"

Integration to your site:

<script type="text/javascript" src="dd_pushupbox.js"></script>
<link rel="stylesheet" href="dd_pushupbox.css" type="text/css">

 Example of use from inline events

<!-- Usage with DD_PushUpContent() function -->
<button onclick="DD_PushUpContent('<p>your pushUpBox html...</p>', 'Box title')">Show pushUpBox by using DD_PushUpContent</button>
<!-- Usage with DD_PushUpID() function -->
<div class="dd_pushupbox" id="mypopupID1">
<p>Your content to place at pushUpBox</p>
<button onclick="DD_PushUpID('mypopupID1','Box title');">Show pushUpBox by using DD_PushUpID</button>

 Examples of use from a script

<script type="text/javascript">
DD_PushUpContent('<p>your pushUpBox html...</p>', 'Box title');
DD_PushUpID('yourid', 'Box title');

 Configurating options at the script dd_pushupbox.js

var DD_PushUpBox = function () {
// Configuration
var config = {
width: 200,                  /* Width of the box */
padding: 10,                 /* Padding of the PushUpBox title and content */
title: true,                 /* Display title */
closingX: true,              /* Display closingX */
closingXHTML: '&#10006;'     /* The content of the closing <button>&#10006;</button> */