jQuery Plugins: tossnModal

Full responsive jQuery modal plugin. Download and use it free.

Examples

Example 1

Simple 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>

Example 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>

Example 3

Modal with 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>

Example 4

Modal by jQuery function

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

Example 5

Modal by jQuery with options

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

Global options top

Key Type Default Description
padding integer 20 Distance to window frame.
overlayColor string #222222 Overlay background color.
overlayOpacity float 0.75 Overlay opacity.
constructSpeed integer 400 Construct speed in milliseconds.
closeOnBgClick boolean true Close modal if backgroud was clicked.
enableEscapeKey boolean true Close modal by clicking escape key.

Callback functions top

Key Default Description
onStart null Will be called before loading.
onComplete null Will be called after loading.
onClose null Will be called before modal is closed.
onClosed null Will be called after modal is closed.

Public methods top

Method Description
$.tossnModal.close() Will close the current modal.

Events top

Method Description
$.tossnLightbox.close() Will close the current lightbox.
$.tossnLightbox.prev() Will step to the next image of the current lightbox gallery.
$.tossnLightbox.next() Will step to the previous image of the current lightbox gallery.

Directory

Download

Download our latest release tossnModal v0.0.2

Download!