Menu
I have been looking at all available jQuery plugins for a modal box that is draggable. The only problem is that every modal box I have found that is dragable requires a title bar. Does anyone know of any jQuery plugins that allow me to create a draggable modal box without a title bar? In this case you would be able to drag it via the border of the box. Is there any way I can use jQuery UI Draggable with a while making it a modal?
489
Just make your own modal? There are tutorials for making the overlay but the basic functionality isn't really that hard.
Fiddle: http://jsfiddle.net/calder12/mxWf8/1/
HTML:
<head>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<div id="modal"></div>
<a href="#" class="click">click me</a>
CSS:
#modal{
border:4px solid #CCC;
width:100px;
height:50px;
display:none;
position:absolute;
left:50%;
top:50%;
margin:-25px 0 0 -50px;
border-radius:5px;
}
jQuery:
$('.click').click(function(){
$('#modal').show();
$('#modal').draggable();
});
This simple method works for me:
// first invoke jquery modal the standard way
$('#myModal').modal();
// now make it draggable
$('#myModal').draggable();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
