Baidu Popup.js ポップアップ ボックスの進化版、ドラッグ アンド ドロップの小さいフレームのリリース、IE6/7/8、Firefox、Chrome_javascript スキルと互換性あり

Script House は以前にもそのようなコードをリリースしましたが、これは大きな問題ではありませんが、今回のバージョンでは主にサーバー側のメソッドを実行するためのいくつかの関数とコールバックが追加されており、asp.net 開発または Ajax 開発にとって非常に価値のある改善です。
まずレンダリングを見てみましょう:


オリジナルの Baidu の Popup.js があります

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

宣言された Web ページ、つまり IE6、7、および 8 のマスクには互換性の問題があります。レイヤーは全画面表示にすることができますが、Firefox および Chrome では全画面マスキングはできません。
FF および Chrome でマスク レイヤーが全画面表示にならない原因となる問題は 267 行目にあります:

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

var C = '

';

スタイルマスク レイヤーの DialogBoxBG は単純に height:100% に設定されているため、..> ステートメントを含むページは FF および Chrome と互換性がありません。
しかし、現在、「luocheng」popup.js の「完全版」がインターネット上にあります。それをダウンロードして試してみたところ、FF と Chrome と完全には互換性がありませんでした。マスクレイヤーをフルスクリーンにできないというバグがまだあり、ソースコードを読んでエラーを見つけました：LuochengのバージョンではgetValueメソッドが追加されており、実際にはswitchステートメントに2つのケース「clientHeight」がありました。 1 つを削除した後は、まだ FF と Chrome との互換性がありません。追加された setBackgroundSize メソッドで、height=integer をコピーするだけです。これは Web 標準に従っていないため、FF と Chrome にはバグがあります。

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

setBackgroundSize: function() {
var getValueWidth;
var getMaxValueWidth = [getValue("clientWidth"), getValue("scrollWidth")];
getValueWidth = eval("Math.max(" getMaxValueWidth.toString() ")"); >G( 'dialogBoxBG').style.width = getValueWidth;
var getValueHeight = [getValue("clientHeight"), getValue("scrollHeight")]; Math.max (" getMaxValueHeight.toString() ")");
G('dialogBoxBG').style.height = getValueHeight; },


解決策は簡単です: G(' DialogBoxBG') .style.height = getValueHeight; を G('dialogBoxBG').style.height = getValueHeight "px"; に変更します。

そのため、今後の開発プロセスでは、幅と高さに「px」などの単位を追加するのが最善であることに注意してください。

異なるブラウザ間のページの高さの違いを取得するためのリファレンスを添付します: ClientHeight: IE と FF ではこの属性に違いはありません。どちらもブラウザの可視領域を指します。ブラウザのツールバーとステータスバーを除いた残りのページ表示スペースの高さです。
scrollHeight: IE では、scrollHeight はページの実際のコンテンツの高さであり、FF では clientHeight よりも小さくなる可能性があります。は Web ページのコンテンツの高さですが、最小値は clientHeight です。
/************************************************* *****/
拡張メソッド:

1. サーバー側メソッド

を実行するための確認ボックスのコールバックをポップアップします。

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

function Showconfirm(title, content, target) //確認ダイアログボックスを表示
{
var Pop = new Popup({
contentType: 3,
isReloadOnClose: false,
幅: 350,
高さ: 110
});
pop.setContent("title", title);
pop.setContent("confirmCon", content); .setContent("callBack", ShowCallBackServer); //コールバック関数
pop.setContent("parameter", {
id: "divCall",
str: target,
obj: Pop
});
pop.build();
popp = Pop;
}

// サーバー側を実行します。メソッド、つまり __doPostBack('','') 操作を実行します。

function ShowCallBackServer(para) { var str = para["str"] if ("" != str && null != str) {
str = GetEachBtnName(str);
if ("" != str && null != str) {
//alert(str); , '');
}
}
ClosePop();
}
//ページ内のボタン名を走査します
function GetEachBtnName(obj) {
return obj .name == '' || obj.name == null ? obj.id :
}



OnClick 内="btnTest_Click" の Button コントロールに OnClientClick を return Showconfirm(' ','削除してもよろしいですか?', this) として登録します。
完全なコード:

コードをコピー

コードは次のとおりです: 2. iframe での Popup.js の使用

ページに iframe を埋め込み、iframe にポップアップするダイアログ ボックスまたは確認ボックスを親ページにポップアップ表示します。マスクレイヤーが親ページ内だけでなく全画面表示になっている場合は、確認後にコールバック操作 iframe を実行します。これにより、iframe 内のサーバー側メソッドが実行されます。

コードをコピー

コードは次のとおりです。 function ShowconfirmIFrame(title, content, target) //表示確認ダイアログ{ var Pop = new Popup({ contentType: 3,

isReloadOnClose: false,

width: 350,
height: 110
});
pop.setContent("title", title);
pop.setContent("callBack", ShowIFrame); 🎜>pop .setContent("パラメータ", {
id: "divCall",
str: ターゲット,
obj: ポップ
}); .build( );
popp = Pop;
var temp;
parent.フレーム["コンテンツ"].window.ShowCallBackServerIFrame(temp);
//parent.window.iframe.ShowCallBackServer();
}
function ShowCallBackServerIFrame(para) {
var str = para;
if ("" != str && null != str) {
str = GetEachBtnName(str)
if ("" != str && null != str) {
__doPostBack(str) , '' ; >



コードをコピー


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


//削除
関数subDel(obj)
{
returnparent.parentDel(obj);
}



ボタン ボタン コントロールは OnClientClick イベントを登録します:

コードをコピーします

コードは次のとおりです: 親ページ定義 js メソッド:

コードをコピーします


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

functionparentDel(obj) { return ShowconfirmIFrame('Delete '、'削除してもよろしいですか？ ',obj);
}

popup.js の進化版と通常の改訂版のダウンロード オリジナルのバージョンも上記のように修正されており、完全な互換性はありませんFFとクロームについての質問です。