is a lightweight jQuery based div overlay box for displaying content over the web page, a PopUP called PushUpBox.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 5993951 Jan 24, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Initial commit Aug 6, 2017 DD_PushUpClose desc added Jan 24, 2018
dd_pushupbox.js Some improvements Jan 24, 2018


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

GPL Licence

DD_PushUpBox provides three functions which can be used from everywhere

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

content the content to push
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 PushUpBox by clicking outside the box or by press escape key.
  • 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.

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> */

DD_ Namespace

DD_ stands for Didldu e.K. | HR IT-Solutions (Brand recognition)
It is a namespace prefix, provided to avoid element name conflicts.

Author: Didldu e.K. Florian Häusler
Copyright: (C) 2017 - 2017 Didldu e.K. | HR IT-Solutions GNU/GPLv2 only