HTML ページが中央に配置されたドラッグ可能なカスタムウィンドウをポップアップ表示します。-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:49:35

オリジナル

1317 人が閲覧しました

DIV ポップアップウィンドウを使用してコンテンツを動的に表示する原理: 最初に CSS と HTML を使用してポップアップウィンドウ内のコンテンツを非表示にし、次に JavaScript (このチュートリアルでは JQuery) を使用してコンテンツを動的に表示します。この効果は、限られたレイアウトスペースを最大限に活用できるだけでなく、ユーザーエクスペリエンスを向上させることができます。さらに重要なことに、SEO 効果には影響しません (実際にはページ上に存在しますが、最初は表示されないため)
1. HTML ページに div を定義し、その div に表示する必要があるコンテンツを実装します。

コードをコピーしますコードは次のとおりです。

div id= "ログイン">

ウェブサイトログイン

フォーム ID ="loginForm" >

アカウント:

パスワード:

パスワードをお忘れですか?

百聞は一見にしかず。この DIV ポップアップウィンドウのスクリーンショットを見てみましょう:

2. 使用した CSS スタイル

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

コードをコピーします

コードは次のとおりです。 🎜>位置:absolute; z-index:9999; #login h2 { >行の高さ:40px; フォントサイズ:14px;

色:#666; /login_header.png) 繰り返し -x;

マージン: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 () 

{
$("#login").show().center(350,250);//ログインボックスを表示
}); >

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

4. ポップアップボックスをドラッグできます

コードの実装

コードをコピーしますコードは次のとおりです:

 
$(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 が必要な場合は、ドラッグ アンド ドロップの原則を変更できます。指定された要素上でマウスが押されると、マウス ポイントの座標が計算され、画像が対応する位置に移動します。マウス クリックがキャンセルされると、対応するプレス イベントもキャンセルされ、ページは静止したままになります。 

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