Getting Started

Set up your HTML markup.

1. Copy-paste the stylesheet [link] into your [head] before all other stylesheets to load our CSS.

<link rel="stylesheet" href="//shaksonking.github.io/SHKpopup/public/css/SHKpopup.css">

2. Copy-paste the javascript [body] into your [body] before all other javascript to load our JS.

<script type="text/javascript" src="//shaksonking.github.io/SHKpopup/public/js/SHKpopup.js"></script>

3. Insert this [TAG] back body (Popup back)

<div class="backPopup" onclick="closePopup()"></div>

4. Insert button [id="dialog" onclick="getPopup('dialog')"]

<button id="dialog" onclick="getPopup('dialog')">Popup Dialog</button>

3. Insert this [TAGS] in your content and choose your Popup > [data-popup="dialog"]

<div class="popupBox" data-popup="dialog">
	<div class="popupHeader">
		<span class="popupTitle">Dialog</span>
		<button class="popupCloseBtn" title="Close to ESC" onclick="closePopup()"><i class="material-icons">close</i></button>
	</div>
	<div class="popupContent">
		<p class="popupDialog">
			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
		</p>
	</div>
</div>