jQuery可移动模态对话框 [英] jQuery Movable Modal Dialog Box

查看:256
本文介绍了jQuery可移动模态对话框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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?

推荐答案

有一些教程用于制作叠加层,但基本功能并不那么难。

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

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

这篇关于jQuery可移动模态对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆