CODEWITHSUNDEEP
jqueryhtmlcss
ios85
ios85

Reputation: 2134

jQuery Movable Modal Dialog Box

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?

enter image description here

Upvotes: 9

Views: 31055

Answers (3)

Rick Calder
Rick Calder

Reputation: 18685

Just make your own modal? There are tutorials for making the overlay but the basic functionality isn't really that hard.

$('.click').click(function(){
$('#modal').show();
$('#modal').draggable();   
});
#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;
} 
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
</head>
<div id="modal"></div>
<a href="#" class="click">click

Upvotes: 13

Peter Drinnan
Peter Drinnan

Reputation: 4522

This simple method works for me:

// first invoke jquery modal the standard way
$('#myModal').modal();

// now make it draggable
$('#myModal').draggable();

Upvotes: 10

Tim Booker
Tim Booker

Reputation: 2789

A combination of jqModal and jqDnR will do this:

Upvotes: 0

Related Questions