Modal window Customobox.js
by kompiajaib
HTML
<script src="http://yourjavascript.com/441114301111/custombox-min.js"></script>
<link rel="stylesheet" href="http://dixso.github.io/custombox/dist/custombox.min.css">
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Modal Dialog</h3>
<div>
<p>This is a modal window. You can do the following things with it:</p>
<ul>
<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
<li><strong>Close:</strong> click on the button below to close the modal.</li>
</ul>
<span class="md-close">×</span>
</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-1">Modal 1 - fadein</button>
<div class="md-modal md-effect-2" id="modal-2">
<div class="md-content">
<h3>Modal Dialog</h3>
<div>
<p>This is a modal window. You can do the following things with it:</p>
<ul>
<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
<li><strong>Close:</strong> click on the button below to close the modal.</li>
</ul>
<span class="md-close">×</span>
</div>
</div>
</div>
<button class="md-trigger2" data-modal="modal-2">Modal 2 - slide</button>
<div class="md-modal md-effect-3" id="modal-3">
<div class="md-content">
<h3>Modal Dialog</h3>
<div>
<p>This is a modal window. You can do the following things with it:</p>
<ul>
<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
<li><strong>Look:</strong> a modal window enjoys a certain kind of...CSS
.md-modal{display:none}
.md-content{z-index:10;background:#eee;text-align:left;padding:10px;position:relative;border-radius:5px;border:10px solid #000;}
.md-close{position:absolute;top:0;right:5px;background:none;border:none;font:bold 20px Arial;cursor:pointer;padding:0}
button{display:block;margin-bottom:5px;cursor:pointer}JavaScript
$(function () {
$('.md-trigger').on('click', function ( e ) {
Custombox.open({
target: '#modal-1',
effect: 'fadein',
overlayColor: '#ddd',
width: 600
});
e.preventDefault();
});
$('.md-trigger2').on('click', function ( e ) {
Custombox.open({
target: '#modal-2',
effect: 'slide',
width: 600
});
e.preventDefault();
});
$('.md-trigger3').on('click', function ( e ) {
Custombox.open({
target: '#modal-3',
effect: 'newspaper',
overlayColor: 'red',
width: 600
});
e.preventDefault();
});
$('.md-trigger4').on('click', function ( e ) {
Custombox.open({
target: '#modal-4',
effect: 'fall',
width: 600
});
e.preventDefault();
});
$('.md-trigger5').on('click', function ( e ) {
Custombox.open({
target: '#modal-5',
effect: 'sidefall',
});
e.preventDefault();
});
$('.md-trigger6').on('click', function ( e ) {
Custombox.open({
target: '#modal-6',
effect: 'blur',
});
e.preventDefault();
});
$('.md-trigger7').on('click', function ( e ) {
Custombox.open({
target: '#modal-7',
effect: 'flip',
});
e.preventDefault();
});
$('.md-trigger8').on('click', function ( e ) {
Custombox.open({
target: '#modal-8',
effect: 'sign',
});
e.preventDefault();
});
$('.md-trigger9').on('click', function ( e ) {
Custombox.open({
...