jBox
HTML
<link rel="stylesheet" href="http://netdna.jboxcdn.com/jBox.css">
<script src="http://netdna.jboxcdn.com/jBox.min.js"></script>
<link rel="stylesheet" href="http://stephanwagner.me/css/jBox/demo-html.css">
<link rel="stylesheet" href="http://stephanwagner.me/css/jBox/Demo/draggable-popup-windows.css">
<div class="DemoContainer"> <span id="modalDragOnTitle">Toggle: Drag on title</span>
<br /> <span id="modalDragOnElement">Toggle: Drag anywhere</span>
</div>
CSS
body {
background: url(//hdwallpaperd.com/wp-content/uploads/wallpaper-photos-61.jpg);
}
JavaScript
$(document).ready(function () {
// Drag with title
new jBox('Modal', {
attach: $('#modalDragOnTitle'),
width: 280,
height: 250,
overlay: false,
background: '#E6E6E6',
title: 'jBox',
content: 'Drag me around by using the title',
draggable: 'title'
});
// Drag anywhere
new jBox('Modal', {
attach: $('#modalDragOnElement'),
width: 300,
height: 200,
title: 'jBox',
overlay: false,
createOnInit: true,
content: 'Drag me around by clicking anywhere',
draggable: true
});
});