Minimalist jQuery Dialog Popup Plugin - Poptuk
File Size: | 2.92 KB |
---|---|
Views Total: | 4036 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.