HTML ページが中央に配置されたドラッグ可能なカスタム ウィンドウをポップアップ表示します。

マージン:0;
ボーダー:1px
カーソル:移動;ログイン h2 img {
float:right;
top:14px;
cursor:pointer;
#login div info {
パディング :10px 0 5px 0;
text-align:center;
;
#login div.user, #login div.pass {
フォントサイズ:14px;
カラー:#666;
テキスト整列:センター;
#login input.text {
幅:200px ;
高さ: 25px;
ボーダー:1px;
フォントサイズ:14px;
text-align:center;
padding:15px 0;
#login input.submit {
width:107px;
background:url(images/ login_button.png) no-repeat;
border:none;
#login .other {
text-align:right; ;
color: #666;
}


ここで注意すべき点は、中央に表示する必要があるため、絶対位置を使用します。 :absolute; 次に、ポップアップ レイヤーであるため、div はペリフェラルの最後になければなりません。そのため、ここでは z-index:9999 に設定します。 div 自体は非表示であり、display:none に設定する必要がありますが、ここでは効果を直接確認する必要があるため、

を使用して直接表示させます。 3. 表示のために中央に配置する必要があります。したがって、最初にブラウザの高さと幅を取得する必要があります。スクロール バーの水平または垂直オフセットがある場合は、それも取得する必要があります。長さは、ブラウザの div 位置を取得するために計算されます。




コードをコピー


コードは次のとおりです。


$(document).ready(function( )
{
jQuery.fn.extend({
center:function(width,height)
{
return $(this).css("left", ($(window) .width( )-width)/2 $(window).scrollLeft()).
css("top", ($(window).height()-height)/2 $(window).scrollTop() ).
css("幅",幅)。
}
}); >ボタンをクリックすると表示されます




コードをコピー


コードは次のとおりです:


$(".login").click(function ()

$(document).ready(function()
{
jQuery.fn.extend({
/ /ドラッグ アンド ドロップ Function
drag:function(){
var $tar = $(this);
return $(this).mousedown(function(e){
if(e.target .tagName == "H2"){
var diffX = e.clientX - $tar.offset().left;
var diffY = e.clientY - $tar.offset().top; $(document) .mousemove(function(e){
var left = e.clientX - diffX;
var top = e.clientY - diffY;
if (left left = 0;
}
else if (left <= $(window).scrollLeft()){
left = $(window).scrollLeft(); if (left > ; $(window).width() $(window).scrollLeft() - $tar.width()){
left = $(window).width() $(window).scrollLeft( ) -$tar .width();
}
if (top top = 0;
}
else if (top top = $(window).scrollTop();
}
else if (top > $(window).height() $(window).scrollTop() - $ tar.height( )){
top = $(window).height() $(window).scrollTop() - $tar.height()
}
$tar.css("left ",left ' px').css("top",top 'px');
});
}
$(document).mouseup(function(){
$(this ).unbind( "mousemove");
$(this).unbind("mouseup")
}); >});


ここでは、クリックしてドラッグできる div コンテンツ内の H2 要素にのみ焦点を当てます。グローバル div が必要な場合は、ドラッグ アンド ドロップの原則を変更できます。指定された要素上でマウスが押されると、マウス ポイントの座標が計算され、画像が対応する位置に移動します。マウス クリックがキャンセルされると、対応するプレス イベントもキャンセルされ、ページは静止したままになります。

ドラッグ メソッドを呼び出します