Full responsive jQuery modal Plugin. Herunterladen und frei nutzen.
jQuery Plugins: tossnModal
Thorsten Gading
Thorsten Gading
2019-10-15T07:09:04+00:00
900
600
https://www.tossn.de/jquery-plugins.html
Beispiele
Beispiel 1
Standard Modal
<button type="button" data-toggle="tossn-modal" data-target="#modalExample1">Modal md</button>
<div id="modalExample1" class="tossn-modal" tabindex="-1">
<div class="modal-content modal-md">
<div class="modal-header">
<button type="button" class="close" data-task-type="close">×</button>
<h2>Modal normal</h2>
</div>
<div class="modal-body">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ...</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. ...</p>
</div>
<div class="modal-footer">
<button type="button" data-task-type="close">Close</button>
</div>
</div>
</div>
Beispiel 2
Modal xs
<button type="button" data-toggle="tossn-modal" data-target="#modalExample2">Modal xs</button>
<div id="modalExample2" class="tossn-modal" tabindex="-1">
<div class="modal-content modal-xs">
<div class="modal-header">
<button type="button" class="close" data-task-type="close">×</button>
<h2>Modal Title</h2>
</div>
<div class="modal-body">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ...</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. ...</p>
</div>
<div class="modal-footer">
<button type="button" data-task-type="close">Close</button>
</div>
</div>
</div>
Beispiel 3
Modal mit Events
<button type="button" data-toggle="tossn-modal" data-target="#modalExample3">Modal with events</button>
<div id="modalExample3" class="tossn-modal" tabindex="-1">
<div class="modal-content modal-xs">
<div class="modal-header">
<button type="button" class="close" data-task-type="close">×</button>
<h2>Modal with events</h2>
</div>
<div class="modal-body">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod ...</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren ...</p>
</div>
<div class="modal-footer">
<button type="button" data-task-type="close">Close</button>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#modalExample3').on('start.tossn.modal', function(event) {
alert('start');
});
$('#modalExample3').on('complete.tossn.modal', function(event) {
alert('complete');
});
$('#modalExample3').on('close.tossn.modal', function(event) {
alert('close');
});
$('#modalExample3').on('closed.tossn.modal', function(event) {
alert('closed');
});
});
</script>
Beispiel 4
Modal über jQuery-Funktion
<button type="button" id="openModal1">Modal by jQuery function</button>
<div id="modalExample4" class="tossn-modal" tabindex="-1">
<div class="modal-content modal-xs">
<div class="modal-header">
<button type="button" class="close" data-task-type="close">×</button>
<h2>Modal by jQuery function</h2>
</div>
<div class="modal-body">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod ...</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren ...</p>
</div>
<div class="modal-footer">
<button type="button" data-task-type="close">Close</button>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#openModal1').on('click', function(event) {
$('#modalExample4').tossnModal();
});
});
</script>
Beispiel 5
Modal über jQuery-Funktion mit Optionen
<button type="button" id="openModal2">Modal by jQuery function with options</button>
<div id="modalExample5" class="tossn-modal" tabindex="-1">
<div class="modal-content modal-xs">
<div class="modal-header">
<button type="button" class="close" data-task-type="close">×</button>
<h2>Modal by jQuery function</h2>
</div>
<div class="modal-body">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod ...</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren ...</p>
</div>
<div class="modal-footer">
<button type="button" data-task-type="close">Close</button>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#openModal2').on('click', function(event) {
$('#modalExample5').tossnModal({
padding: 100,
overlayColor: '#00ffff',
overlayOpacity: 0.3,
constructSpeed: 1000,
closeOnBgClick: false,
enableEscapeKey: false,
onStart: function() {alert('onStart');},
onComplete: function() {alert('onComplete');},
onClose: function() {alert('onClose');},
onClosed: function() {alert('onClosed');}
});
});
});
</script>
Globale Optionen Seitenanfang
Key | Typ | Standard | Beschreibung |
---|---|---|---|
padding | integer | 20 | Abstand zum inneren Rahmen des Browsers. |
overlayColor | string | #222222 | Farbe des Overlay. |
overlayOpacity | float | 0.75 | eckkraft des Overlay. |
constructSpeed | integer | 400 | Erstellzeit in Millisekunden. |
closeOnBgClick | boolean | true | Modal schließen, wenn in den Hintergrund geklickt wird. |
enableEscapeKey | boolean | true | Modal schließen, wenn ESC geklickt wird. |
Callback Funktionen Seitenanfang
Key | Standard | Beschreibung |
---|---|---|
onStart | null | Wird vor dem Laden des Dialogs aufgerufen. |
onComplete | null | Wird nach dem Laden des Dialogs aufgerufen. |
onClose | null | Wird aufgerufen kurz bevor der Dialog geschlossen wird. |
onClosed | null | Wird aufgerufen nachdem der Dialog geschlossen wird. |
Public Methoden Seitenanfang
Methode | Beschreibung |
---|---|
$.tossnModal.close() | Schließt den aktuellen Dialog. |
Events Seitenanfang
Methode | Beschreibung |
---|---|
$.tossnLightbox.close() | Schließt die aktuelle Lightbox. |
$.tossnLightbox.prev() | Zeigt das vorherige Bild einer Lightbox Galerie an. |
$.tossnLightbox.next() | Zeigt das nächste Bild einer Lightbox Galerie an. |