PushUpBox

PushUpBox
0,00 € *

inkl. MwSt. und Versand

Als Sofortdownload verfügbar

  • HRIT10012
DD_PushUpBox bietet drei Funktionen für Modal Aktionen DD_PushUpContent  Diese Funktion... mehr
Produktinformationen "PushUpBox" jQuery Plugin

Eine leichte jQuery-basierte Div-Overlay-Box (Modal-Box) zur Anzeige von Inhalten wie (HTML, CMS-Module, etc....) über die Webseite. Quasi ein Modal-PopUP namens PushUpBox.


Community-Edition

Die Community-gestützte Version mit den Basis Funktionen.

DD_PushUpBox bietet drei Funktionen für Modal Aktionen

DD_PushUpContent
 Diese Funktion dient dazu, benutzerdefinierte Inhalte auf die PushUpBox zu übertragen. Es werden zwei Parameter erwartet:

Parameter 
content Der zu übertragende Inhalt als text oder html
contentTitle Der Titel für die Box
DD_PushUpContent(content, contentTitle)

DD_PushUpID
Diese Funktion dient dazu, den Inhalt von einer ID in die PushUpBox zu verschieben. Es werden zwei Parameter erwartet:

Parameter 
contentID Die ID mit dem Inhalt, welche übertragen werden soll
contentTitle Der Titel für die Box
DD_PushUpID(contentID, contentTitle)

DD_PushUpID hat eine besondere Handhabung. Es verschiebt das html der Inhalts-ID in die PushUpBox und nach dem Schließen der Box schiebt es den Inhalt wieder zurück.

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

.dd_pushupbox

(Zum Beispiel, um ein unsichtbares Login-Modul für die Website bereitzustellen, das beim Aufruf durch DD_PushUpID in die pushUpBox platziert werden soll, wie ein Login-Popup. Es ist nützlich, wenn Sie ein CMS wie Joomla, Wordpress etc. verwenden.... So können Sie das Login-Modul oder jedes andere Modul unten auf Ihrer Website platzieren, ihnen die Klasse .dd_pushupbox geben, um es unsichtbar zu machen, und eine benutzerdefinierte ID für die DD_PushUpID-Funktion, um das Login-PopUp auszulösen. Das ist alles, so einfach kann man mittels einer ID alles in ein Modal umandeln. ;)

DD_PushUpClose
Diese Funktion dient nur dazu, die PushUpBox zu schließen und eine eventuell gedrückte ID zurückzuwerfen.

 

Weitere Funktionen:

  • Schließen der PushUpBox, indem man außerhalb der Box klickt oder die Escape-Taste drückt.
  • Einige Einstellungen und CSS-Einstellfunktionen (siehe Konfiguration unter dd_pushupbox.js).
  • Verkleinerte CSS (minify) und komprimierte JS-Versionen (minfiyed & compressed).
  • Kompatibel mit jeder jQuery-Version.
  • Unterstützt alle gängigen Webbrowser.

Community-Edition Support, wir geben nur indirekt Support. Lediglich Issue Support über GitHub und die Community!


Direktsupport zu "PushUpBox"

Integration in Ihre Website:

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

 Anwendungsbeispiel aus Inline-Events:

<body>
<!-- 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>
</div>
<button onclick="DD_PushUpID('mypopupID1','Box title');">Show pushUpBox by using DD_PushUpID</button>
</body>

 Beispiele für die Verwendung aus einem Skript

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

 Konfigurieren von Optionen am Skript 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> */
};