Minimalist jQuery Dialog Popup Plugin - Poptuk

Poptuk is a jQuery plugin that allows you to embed any Html content in a nice clean dialog popup with few lines of Javascript code.

How to use it:

1. Create the Html template for the popup window.

<div id="poptuk">
  <div id="poptuk_content" >
    <div class="poptuk_body"></div>
    <span onclick="poptuk_a('close')" class="poptuk_b" >Okey</span> 
  </div>
</div>

2. The sample CSS to style the popup window.

#poptuk {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.5);
  top: 0;
  left: 0;
}

#poptuk_content {
  background: #fff;
  display: block;
  width: 320px;
  border-radius: 3px;
  border-top: 4px solid #ddd;
  padding: 10px;
  margin: 0 auto;
}

#poptuk_content .poptuk_body {
  max-height: 500px;
  overflow-y: auto;
}

.poptuk_b {
  background: #fff;
  display: inline-block;
  border-radius: 3px;
  box-shadow: 0 0 2px #bbb;
  padding: 10px;
  cursor: pointer;
}

3. Include the jQuery library and the jQuery Poptuk plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="poptuk/poptuk.js"></script> 

4. Add Html content for the popup window in your Javascript.

poptuk('Your content goes here');

---

This awesome jQuery plugin is developed by cesarpichon. For more Advanced Usages, please check the demo page or visit the official website.