jQuery Movable Modal对话框

时间:2012-11-27 19:46:23

标签: jquery html css

我一直在寻找可拖动的模式盒的所有可用jQuery插件。唯一的问题是我找到的每个模态框都是可拖动的,需要一个标题栏。有谁知道任何jQuery插件,允许我创建一个没有标题栏的可拖动模式框?在这种情况下,您可以通过框的边框拖动它。有没有什么方法可以使用jQuery UI Draggable一段时间使它成为一个模态?

enter image description here

3 个答案:

答案 0 :(得分:11)

只需制作自己的模态?有制作叠加层的教程,但基本功能并不是那么难。

小提琴: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();   
});​

答案 1 :(得分:6)

这个简单的方法对我有用:

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

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

答案 2 :(得分:0)