JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<a data-id="about" class="modal" href="#">Export</a>

<div data-id="about" class="modal-content">
	
	<ul>
	<li>
		ScriptUI Dialog Builder 1.0
	</li>
		<li><a href="http://tolleson.com/work/adobe/creative-cloud-identity/">Background image source</a></li>
	</ul>
	<div class="close">Close</div>
	
</div>


<!-- http://danml.com/download.html -->

CSS

#modal-window {
	position: absolute;
	z-index: 9999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0, .2);
}

.center-1 {
  display: table;
  height: 100%;
  width: 100%;
}

.center-2 {
  display: table-cell;
  vertical-align: middle;
}

.center-3 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.modal-content {
	display: none;
}

.modal-inner-wrap {
	position: relative;
	display: inline-block;
	background: #fff;
}

.modal-container .close {
	cursor: pointer;	
}

#modal-window[data-id="about"] .modal-inner-wrap {
	padding: 20px 28px;
	border-radius: 7px;
	background: #444;
	color: #fff;
}

#modal-window[data-id="about"] .modal-inner-wrap a {
	color: #fff;
	text-decoration: none;
}

#modal-window[data-id="about"] .modal-inner-wrap ul,
#modal-window[data-id="about"] .modal-inner-wrap li{
	padding: 0;
	list-style: none;
}

JavaScript

(function($){

	$('.modal').on('click', openModal);

	function openModal() {
		
		var m = {};
		
		m.link = $(this),
    m.data = m.link.data(),
		m.content = $('.modal-content[data-id="'+ m.data.id +'"]').html(),
		m.HTMLwrap = $(
			'<div id="modal-window" data-id="'+ m.data.id +'">' +
				'<div class="center-1">' +
					'<div class="center-2">' +
						'<div class="center-3 modal-container">' +
							'<div class="modal-inner-wrap">' + m.content + '</div>' +
						'</div>' +
					'</div>' +
				'</div>' +
			'</div>' 
		);
		
		if ( $('#modal-window').length < 1 ) {
			m.HTMLwrap.appendTo( 'body' );
		}
		
		$('#modal-window .close').on('click', function() {
			$('#modal-window').remove();
		});
		
	}

})(jQuery);