jQuery Plugins: tossnModal

October 15, 2019

Examples

Example 1

Simple Modal

Test it!

<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

Test it!

<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

Test it!

<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

Test it!

<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

Test it!

<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

Callback functions top

Public methods top

Events top