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

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

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

div id= "ログイン">

ウェブサイトログイン

フォーム ID ="loginForm" >

アカウント:

パスワード:

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

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

2. 使用した CSS スタイル



コードをコピーします

コードは次のとおりです。 🎜>位置: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);//ログインボックスを表示
}); >

レンダリング

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

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

コードをコピーします


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

$( "#login").drag(); これで、ポップアップ ボックスのタイトル バーをクリックし、ブラウザ内で自由にドラッグできるようになります。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。