Jquery はポップアップ レイヤー plug-in_jquery を実装します

同じページ上でログインや一部の操作を行うなど、ポップアップ レイヤーのアプリケーションはまだたくさんあります。そのため、私は常にポップアップを作成したいと考えていました。レイヤープラグイン。さっそく始めましょう!

1: マスクレイヤー

レイヤーをポップアップするには、まずマスク レイヤーを使用して下のページをブロックする必要があります。このマスク レイヤーは全画面表示であり、ページをスクロールする必要があるため、位置を固定します。これには透明効果もあります。私の定義 マスクレイヤーCSSの名前はmask

です

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

.mask
{
位置: 固定;
幅: 100%;
高さ: 100%;
背景色: 白;
オーバーフロー: スクロール;
フィルター: alpha(opacity=50);
-moz-不透明度: 0.5;
不透明度: 0.5;
z インデックス: 20;
オーバーフロー: 自動;
上: 0px;
右: 0px;
}

2: プラグインの主要パラメータ

タグ: なぜタグが必要なのでしょうか?タグを使用して、ポップアップする必要がある非表示の要素を指定できます。タグをセレクター「#*」として指定すると、指定した要素をポップアップできます。ここではデフォルトをこれに設定します。

mainContent: このパラメータは必須ですか?主にサーバーコントロールに設定すると、フォームが送信できなくなります。しかし、送信をクリックするとページが更新され、ポップアップレイヤーが消えるので、まだ役に立たないと思います...

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

$.fn.xsPop = 関数 (オプション) {
vardefaults = {//デフォルト値
title: "ポップアップ ウィンドウ", //ウィンドウ タイトル
幅: 500、
高さ: 400、
タグ: this, // ロードする必要がある要素をポップアップします
close: "閉じる",
mainContent: "body"//フォームを送信するためのコンテナですが、送信するとページが更新されます...
};
var options = $.extend(defaults, options) //渡されたパラメータでオーバーライドします
This.each(function() {
xsMain(options.title, options.width, options.heigth, options.tag, options.close, options.mainContent); // プラグインのメインの入り口
});
};

3: xsMain 関数を使用して要素を追加し、イベントをバインドします

ここには高さと幅を制御するプロセスがあります。設定が画面の高さと幅を超える場合、設定が画面に合わせて調整され、ポップアップ レイヤーが大きすぎて操作できなくなるのを防ぎます。もう一つは普通にhtmlを追加する方法ですが、私は文字列追加を使います

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

//受信データに従って、マスクレイヤーを追加し、プロンプトボックスをポップアップ表示します
関数 xsMain(タイトル、幅、高さ、タグ、閉じる、mainContent) {
var divmask = "

";
$(mainContent).append(divmask);
var xsPop1 = "

";
var xsPop2 = " " タイトル " " 閉じる "";
var xsPop3 = " var xsPop5 = "

";
var allHtml = xsPop1 xsPop2 xsPop3 xsPop5;
$(mainContent).append(allHtml);
$(tag).show();
$(tag).appendTo("#xsPopMain");
//ブラウザの高さと幅を取得し、その後の判断を行う（高さが超過、ドラッグ枠の制限）
clientHeight = window.screen.height;
clientWidth = window.screen.width;
If (高さ > clientHeight) {
高さ = clientHeight - 100;
}
If (幅 > clientWidth) {
width = clientWidth - 100;
}
$("#xsPop").css({
"高さ": 高さ "px",
"width": 幅 "px",
"margin-top": "-" (高さ / 2) "px",
"margin-left": "-" (幅 / 2) "px"
});
$("#xsPopMain").css("height", height - $("#xsPopHead").height());
xsdrag("#xsPopHead", "#xsPop") //バインドドラッグアクション
$("#xsColse").bind("click", function () { ClosePop(tag, mainContent); }); //バインドクローズアクション
}

4: アクションを閉じる

ここでは、最初にコンテナにタグを付ける必要があります。そうしないと、後で削除するときにタグも一緒に削除され、2 回目にポップアップしたときにタグが見つからなくなります。

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

//ポップアップレイヤーを閉じます
関数 ClosePop(tag, mainContent) {
$(mainContent).append(tag); //保存しない場合は、手順 4 の $("#xsPop").remove() でタグがクリアされます
$(tag).hide();
$(".mask").remove();
$("#xsPop").remove();
}

5: ドラッグ効果

方法 1: 要素を使用するイベントであることに初めて気づきましたが、要素が失われやすく、効果が理想的ではありません

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

//ポップアップレイヤーをドラッグ＆ドロップします（失敗した方法、オブジェクトの損失が発生します）
//コントロールはドラッグ要素、タグはアクション要素、通常、コントロールはタグ内にあります
// 関数ドラッグ(コントロール, タグ) {
// // var isMove = false;
// var abs_x = 0, abs_y = 0;
// // $(control).mousedown(
// // 関数 (イベント) {
// // var top = $(tag).offset().top;
// // var left = $(tag).offset().left;
// abs_x =event.pageX - left;
// // abs_y =event.pageY - top;
// // isMove = true;
}).mouseleave(function () {
// // isMove = false;
// // });
// // $(control).mouseup(function () {
// // isMove = false;
// // });
// // $(document).mousemove(function (event) {
// // if (isMove) {
// // $(タグ).css({
// // '左':event.pageX - abs_x $(tag).width() / 2 - 1,
// // 'top':event.pageY - abs_y $(tag).height() / 2 - 1
// // // // }
// // false を返します;
// // });
// }

方法 2 (私が現在使用している方法) は、ドキュメントの上下を使用しますが、まだいくつかの問題があり、移動が速すぎる問題と、座標がわずかにジャンプする問題があります

また、ポップアップ レイヤーを画面の上部に直接ドラッグして放すと、ドラッグして元に戻すことも、クリックして閉じることもできなくなります。百度のホームページのポップアップレイヤーを見てみましたが、こちらも同様の現象が発生していますが、ウィンドウを拡大・縮小するとポップアップレイヤーが中央に戻ってしまいます。私もこれを試してみましたが、onresizeをバインドすると、明らかにonresizeではないイベントが表示されたため、マウスの位置を0未満にすることはできないと判断しました。

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

//ポップアップレイヤーをドラッグアンドドロップします
//コントロールはドラッグ要素、タグはアクション要素、通常、コントロールはタグ内にあります
関数 xsdrag(コントロール, タグ) {
$(control).mousedown(function (e)//emouse イベント
{
var offset = $(this).offset() //ページ上の DIV の位置
var x = e.pageX - offset.left; // マウスポインタと DIV 要素の左端の間の距離を取得します
var y = e.pageY - offset.top; //マウスポインタとDIV要素の上端との距離を取得します
$(document).bind("mousemove", function (ev)//マウス移動イベントをバインドします。カーソルは DIV 要素の外側にも影響を与える必要があるため、DIV 要素のイベントの代わりにドキュメント イベントを使用する必要があります。
{
If (EV.Pagey & Lt; = 0) {Return;} // フレームを閉じてドラッグできないようにします
$(tag).css({
'left': ev.pageX - x $(tag).width() / 2, // これをレイアウトに追加する必要があります
「トップ」: ev.pageY - y $(tag).height() / 2
});
});
});
$(document).mouseup(function () {
$(this).unbind("mousemove");
});
}

6: スタイルシート

ポップアップ レイヤーのレイアウトでは上と左のマージンと上に負の値が使用されるため、js に高さと幅の半分を追加します

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

.mask
{
位置: 固定;
幅: 100%;
高さ: 100%;
背景色: 白;
オーバーフロー: スクロール;
フィルター: alpha(opacity=50);
-moz-不透明度: 0.5;
不透明度: 0.5;
z インデックス: 20;
オーバーフロー: 自動;
上: 0px;
右: 0px;
}
.PopUp
{
パディング: 0px;
位置: 絶対;
z インデックス: 21 !重要;
背景色: 白;
ボーダースタイル: ソリッド ソリッド ソリッド ソリッド;
枠線の幅: 1px;
枠線の色: #C0C0C0;
左: 50%;
トップ: 50%;
}
.ポップヘッド
{
背景色: #F0F0F0;
ボーダーボトムスタイル: ソリッド;
枠の下の幅: 1px;
境界線の下の色: #C0C0C0;
高さ: 30px;
カーソル: 移動;
クリップ：rect(0px, auto, auto, 0px);
}
.PopHead b
{
float: 左;
表示: ブロック;
色: #C0C0C0;
フォントファミリー: システム;
フォントサイズ: 中;
行の高さ: 30px;
テキストインデント: 2em;
}
.PopHead スパン
{
float: 右;
表示: ブロック;
テキストの配置: 右;
行の高さ: 30px;
カーソル: ポインタ;
テキストインデント: 5px;
色: #FF0000;
フォントサイズ: 12pt;
}
.PopMain
{
パディング: 10px;
オーバーフロー: 自動;
}

7: ページの使用

テストサーバーコントロールはフォームを送信できます

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

$(document).ready(function () {
$("#btnPop").click(function () {
var オプション = {
タイトル: 「マイポップ」、
幅: 500、
高さ: 400、
閉じる: "閉じる",
mainContent: "フォーム"
}
$("#pop1").xsPop(options);
});
});

はい、以上です。本当はサイズを変えるためにボーダープルを作りたかったのですが、時間がかかりそうなのでやめました。実際、正直に言うと、オーバーフローを設定するとスクロールバーが表示されるため、ドラッグすることはあまり意味がないと思いますし、境界線のコントロールのサイズもあまり意味がありません。