8

ドラッグ可能なモーダル ボックス用の利用可能なすべての jQuery プラグインを調べてきました。唯一の問題は、ドラッグ可能なすべてのモーダル ボックスがタイトル バーを必要とすることです。タイトルバーなしでドラッグ可能なモーダルボックスを作成できるjQueryプラグインを知っている人はいますか? この場合、ボックスの境界線を介してドラッグできます。jQuery UI Draggable を使用してモーダルにする方法はありますか?

ここに画像の説明を入力

4

3 に答える 3

13

独自のモーダルを作成するだけですか？オーバーレイを作成するためのチュートリアルがありますが、基本的な機能はそれほど難しくありません。

フィドル: 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();   
});​
于 2012-11-27T20:25:31.313 に答える
8

この簡単な方法は私にとってはうまくいきます：

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

// now make it draggable
$('#myModal').draggable();
于 2013-07-16T15:44:21.487 に答える
0

jqModal と jqDnR を組み合わせると、次のようになります。

于 2012-11-27T22:36:15.593 に答える