jQuery 可移动模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13591851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Movable Modal Dialog Box
提问by ios85
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?
我一直在寻找可拖动模式框的所有可用 jQuery 插件。唯一的问题是我发现的每个可拖动的模式框都需要一个标题栏。有谁知道有什么 jQuery 插件可以让我创建一个没有标题栏的可拖动模式框？在这种情况下，您可以通过框的边框拖动它。有什么方法可以让我使用 jQuery UI Draggable 一段时间使其成为模态？
回答by Rick Calder
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/
小提琴：http: //jsfiddle.net/calder12/mxWf8/1/
HTML:
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:
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:
jQuery：
$('.click').click(function(){
$('#modal').show();
$('#modal').draggable();
});?
回答by Peter Drinnan
This simple method works for me:
这个简单的方法对我有用：
// first invoke jquery modal the standard way
$('#myModal').modal();
// now make it draggable
$('#myModal').draggable();
回答by Tim Booker
A combination of jqModal and jqDnR will do this:
jqModal 和 jqDnR 的组合可以做到这一点：
