PushUpBox
- Artikel-Nr.: HRIT10012
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!
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: '✖' /* The content of the closing <button>✖</button> */
};
