JSFiddle - React, Tailwind, and code Playground

by Shannenpio Cloning

HTML

<link rel="stylesheet" href="http://dixso.github.io/custombox/dist/custombox.min.css">
<script src="http://yourjavascript.com/441114301111/custombox-min.js"></script>
		<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({
       ...