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

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

May 16, 2016 pm 06:29 PM
ポップアップボックス 百度

Script House は以前にもそのようなコードをリリースしましたが、これは大きな問題ではありませんが、今回のバージョンでは主にサーバー側のメソッドを実行するためのいくつかの関数とコールバックが追加されており、asp.net 開発または Ajax 開発にとって非常に価値のある改善です。
まずレンダリングを見てみましょう:
Baidu Popup.js ポップアップ ボックスの進化版、ドラッグ アンド ドロップの小さいフレームのリリース、IE6/7/8、Firefox、Chrome_javascript スキルと互換性あり

オリジナルの 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);
}
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Baidu でセキュリティ警告をスキップする方法 Baidu でセキュリティ警告をスキップする方法 Feb 23, 2024 pm 10:34 PM

Baidu でセキュリティ警告をスキップするにはどうすればよいですか? Baidu APP にはさまざまなセキュリティ保護サービスがありますが、ほとんどの友人はセキュリティ警告をスキップする方法を知りません。次に、エディタは、Baidu でセキュリティ警告をスキップする方法についての写真とテキストをユーザーに提供します。チュートリアル、興味のあるユーザーは見に来てください! Baidu でセキュリティ警告をスキップする方法 1. まず、Baidu アプリを開き、メイン ページの右下隅に入り、[マイ] をクリックし、マイ エリアの右上隅にある [設定] をクリックします。機能ページで [インターネット セキュリティ] を選択します; 3. 最後に、インターネット セキュリティ インターフェイスで [Web サイト セキュリティ] をクリックして、警告を完全にスキップします。

Baidu の高度な検索の使用方法 Baidu の高度な検索の使用方法 Feb 22, 2024 am 11:09 AM

Baidu 詳細検索の使用方法 Baidu 検索エンジンは現在中国で最も一般的に使用されている検索エンジンの 1 つであり、豊富な検索機能を提供しており、その 1 つが詳細検索です。高度な検索は、ユーザーが必要な情報をより正確に検索し、検索効率を向上させるのに役立ちます。では、Baidu の高度な検索を使用するにはどうすればよいでしょうか?最初のステップは、Baidu 検索エンジンのホームページを開くことです。まず、Baidu の公式 Web サイト (www.baidu.com) を開く必要があります。ここが百度検索の入り口です。 2 番目のステップでは、「詳細検索」ボタンをクリックします。 Baidu の検索ボックスの右側に、

Deepseek Webバージョンの入り口Deepseek公式ウェブサイトの入り口 Deepseek Webバージョンの入り口Deepseek公式ウェブサイトの入り口 Feb 19, 2025 pm 04:54 PM

DeepSeekは、Webバージョンと公式Webサイトの2つのアクセス方法を提供する強力なインテリジェント検索および分析ツールです。 Webバージョンは便利で効率的であり、公式ウェブサイトは包括的な製品情報、ダウンロードリソース、サポートサービスを提供できます。個人であろうと企業ユーザーであろうと、DeepSeekを通じて大規模なデータを簡単に取得および分析して、仕事の効率を向上させ、意思決定を支援し、イノベーションを促進することができます。

2か月後、人型ロボットWalker Sが服をたたむことができるようになった 2か月後、人型ロボットWalker Sが服をたたむことができるようになった Apr 03, 2024 am 08:01 AM

Machine Power Report 編集者: Wu Xin 国内版の人型ロボット + 大型模型チームは、衣服を折りたたむなどの複雑で柔軟な素材の操作タスクを初めて完了しました。 OpenAIのマルチモーダル大規模モデルを統合したFigure01の公開により、国内同業者の関連動向が注目を集めている。つい昨日、中国の「ヒューマノイドロボットのナンバーワン株」であるUBTECHは、Baidu Wenxinの大型モデルと深く統合されたヒューマノイドロボットWalkerSの最初のデモを公開し、いくつかの興味深い新機能を示した。 Baidu Wenxin の大規模モデル機能の恩恵を受けた WalkerS は次のようになります。 Figure01 と同様に、WalkerS は動き回るのではなく、机の後ろに立って一連のタスクを完了します。人間の命令に従って服をたたむことができる

Baidu シークレット モードを無効にする方法 Baidu シークレット モードを無効にする方法 Feb 29, 2024 pm 03:40 PM

Baidu シークレット モードは、ユーザーが個人情報や閲覧履歴を残さずに Baidu 検索やその他のサービスを利用できるようにするプライバシー保護機能です。ユーザーによっては、検索履歴や閲覧履歴を保存できるように、シークレット モードをオフにする必要がある場合があります。では、Baidu シークレット モードを解除するにはどうすればよいでしょうか?まだよくわからないという友人も、心配しないでください。次に、エディターでシークレット ブラウジング モードを削除する方法が表示されます。次の手順に従ってください。 Baidu シークレット モードの解除方法 1. デスクトップの [Baidu] アイコンをクリックして、Baidu APP を開きます。 2. 何かを検索し、検索結果ページに入ります。 3. ページ下部の[≡]をクリックします。 4. ポップアップウィンドウで「マルチウィンドウ」を見つけ、クリックして入力します。 5.「シークレットモード」のオン/オフを切り替える

百度西陽貝殻の入手方法を紹介 百度西陽貝殻の入手方法を紹介 Mar 28, 2024 am 09:11 AM

西浪には貝殻の場所と入手方法が分からないユーザーがたくさんいます。数時間探してもまだ見つからないプレイヤーもいます。以下では、編集者が百度西陽貝殻の入手方法を紹介します。 . ぜひ見に来てください。 Baidu Xirang Shell の入手方法 1. まずコミュニティに来てから、下の写真の場所に来る必要があります。 2. ここで目的地を選択し、188階に入​​るを選択します。 3. 188 階に入った後、歩いているとこのプロンプトが表示されるので、「了解しました」をクリックします。 4. 砲弾の場所は少し見つけにくいですが、188 エレベーターのすぐ後ろに、砲弾である小さな光る点があります。 5. 貝殻をクリックするには VR コントローラーを使用する必要があります。引き換え方法 1. まず、ページ右上隅の「設定」アイコンをクリックし、「」を選択します。

Baidu Apollo、L4自動運転に対応した世界初の大型モデル「Apollo ADFM」を発売 Baidu Apollo、L4自動運転に対応した世界初の大型モデル「Apollo ADFM」を発売 Jun 04, 2024 pm 08:01 PM

5月15日、Baidu Apolloは武漢Baidu キャロット Auto Robot Zhixing Valleyで2024年アポロデーを開催し、過去10年間におけるBaiduの自動運転における大きな進歩を包括的に実証し、大型モデルと乗客の安全性の新たな定義に基づいた技術的飛躍をもたらした。世界最大の自動運転ネットワークである百度は、自動運転を人間の運転よりも安全なものにしました。このおかげで、より安全、より快適、環境に優しい、低炭素の旅行方法が理想から現実へと変わりつつあります。百度グループ副社長兼インテリジェント・ドライビング・ビジネス・グループ社長の王雲鵬氏はその場で「自動運転車を開発するという私たちの本来の目的は、より良い旅行への人々の高まる切望を満たすことだ。人々の満足こそが私たちの原動力である。なぜなら安全性、とても美しいので、見ることができて嬉しいです

AIツールのおすすめ AIツールのおすすめ Nov 29, 2024 am 11:08 AM

この記事では、Douyin Doubao、Wenxin Yige、Tencent Zhiying、Baidu Feipiao EasyDL、Baidu AI Studio、iFlytek Spark Cognitive Large Model を含む 6 つの人気 AI ツールを紹介します。これらのツールは、テキスト作成、画像生成、ビデオ編集、AI モデル開発などのさまざまな機能をカバーしています。適切な AI ツールを選択するには、機能要件、技術レベル、コスト予算などの要素を考慮する必要があります。これらのツールは、AI 支援を必要とする個人や企業に便利で効率的なソリューションを提供します。

See all articles