ホームページ ウェブフロントエンド jsチュートリアル JavaScript で書かれた DIV は Web ページのダイアログ ボックスをポップアップします_JavaScript スキル

JavaScript で書かれた DIV は Web ページのダイアログ ボックスをポップアップします_JavaScript スキル

May 16, 2016 pm 06:48 PM
div ダイアログボックス

オンラインでコードを検索し、いくつかの修正を加えました。
色をカスタマイズできない問題を修正しました。IE6 ~ 8 および Firefox と互換性があります。
カスタマイズ可能です。
//プロンプト ウィンドウ。タイトルの高さ
// プロンプト ウィンドウの境界線の色
// プロンプト ウィンドウのタイトルの色
// プロンプト ウィンドウのタイトルの背景色
// プロンプト コンテンツの背景色
// プロンプト コンテンツテキスト配置
機能は、ページを覆う大きな DIV をポップアップし (IE では透明)、画面の中央に小さな DIV を表示します。
は、機能プロンプト、操作のヒント、お知らせなどとして使用できます。
プロンプトコンテンツは HTML で作成できます マークされたテキストはページリンクにすることもできます

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

function MessageBox()
{
this.titleheight = "21"; // プロンプトウィンドウのタイトルの高さ
this.bordercolor = "#666699";ウィンドウの境界線の色
this.titlecolor = "# 1259a4"; // プロンプト ウィンドウのタイトルの色
this.titlebgcolor = "#e4f1fb"; // プロンプト ウィンドウのタイトルの背景色
this.bgcolor = "#FFFFFF"; // プロンプト コンテンツの背景色
this.MsgAlign="left";

this.Show=function(title, msg, Fr​​amerc, w, h)
{
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight document.documentElement.scrollTop*2;
var bgObj = document.createElement("div"); bgObj.style.cssText = "position:absolute;left:0px; top:0px;width:" iWidth "px;height:" Math.max(document.body.clientHeight, iHeight) "px;filter:Alpha(Opacity= 30);不透明度:0.3;背景色:#000000;z -index:101;";
document.body.appendChild(bgObj);

var msgObj=document.createElement("div" );
msgObj.style.cssText = "position:absolute ;font:11px '宋体';top:" (iHeight-h)/2 "px;left:" (iWidth-w)/2 "px;width :" w "px;height:" h "px;text-align:center;border:1px Solid " this.bordercolor ";background-color:" this.bgcolor ";padding:1px;line-height:22px;z -index:102;";
document.body.appendChild (msgObj);

var table = document.createElement("table");
msgObj.appendChild(table);
table.style.cssText = "margin:0px;border:0px;";
table.cellSpacing = 0;
var tr = table.insertRow(-1); tr.insertCell(-1);
titleBar.style.cssText = ";width:" (w-84) "px;height:" this.titleheight "px;text-align:left;padding:3px;margin :0px;font:bold 13px '宋体';color:" this .titlecolor ";cursor:move;background-color:" this.titlebgcolor;
titleBar.style.paddingLeft = "10px";
titleBar. innerHTML = タイトル;
var moveY = 0;
var moveLeft = 0;
var docMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;

titleBar.onmousedown = function(){
var evt = getEvent(); evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(msgObj.style.left); = function(){
if (移動可能)
{
var evt = getEvent();
var x = moveLeft evt.clientX - moveX;
var y = moveTop evt.clientY - moveY;
if ( x > 0 &&( x w 0 && (y h {
msgObj.style.left = x "px"; 🎜>msgObj.style.top = y "px";
}
}
}

document.onmouseup = function (){
if (移動可能)
{
document.onmousemove = docMouseUpEvent;
moveX = 0;
moveTop = 0; moveLeft = 0;
}
};
}

var closeBtn = tr.insertCell(-1);
closeBtn.style.cssText = "カーソル:ポインター; パディング: 2px;background-color:" this.titlebgcolor;
closeBtn .innerHTML = " ×ウィンドウを閉じる";
closeBtn.onclick = function(){
document.body.removeChild(bgObj);
var msgBox = table.insertRow(-1).insertCell(-1);
msgBox.style.cssText = "font:10pt '宋体';"; >msgBox.colSpan = 2;

if(framerc != "")
{
msg = "";
}
msgBox.innerHTML = "
" msg "
";
if(document.getElementById("frmAlertWin") != null)
{
document.getElementById("frmAlertWin").src =
}


function getEvent(){
return window.event 引数 .callee.caller.arguments[0]
}
}

;
メソッドの呼び出し
var msgbox=new MessageBox();
msgbox.Show('サイトのお知らせ',"ヒント","",500,220);///パラメータ: Title, Content(Tip It canページに接続するときは空にしてください)、リンク ページのアドレス (テキストを使用するときは空にすることもできます)、幅、高さ
ページのロード時にプロンプ​​トが表示される場合は、呼び出しコードを入力してください。 bodyタグの後、それ以外の場合はIE8でエラーが発生します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

CSSを使用してdivの角が欠けていることを認識する方法 CSSを使用してdivの角が欠けていることを認識する方法 Jan 30, 2023 am 09:23 AM

div の角が欠けていることを認識するための CSS メソッド: 1. HTML サンプル ファイルを作成し、div を定義します; 2. div の幅と高さの背景色を設定します; 3. 削除する必要がある div に疑似クラスを追加します隅に配置し、擬似クラスを背景色と同じ色を使用するように設定し、45 度回転して、削除する必要がある隅に配置します。

ChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実装 ChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実装 May 01, 2023 pm 03:28 PM

はじめに 最近 GitHub に ChatGPTAPI をベースにしたブラウザスクリプト openai-translator が登場しました 短期間でスターが 12k に達しました 翻訳だけでなく磨きや要約機能もサポートしています ブラウザプラグに加えて-ins, tauri パッケージも使用します。デスクトップ クライアントをお持ちの場合は、tauri が Rust 部分を使用するという事実を除けば、ブラウザ部分の実装はまだ比較的簡単です。今日は手動で実装します。 openAI によって提供されるインターフェイス。たとえば、次のコードをコピーし、ブラウザ コンソールでリクエストを開始して変換を完了できます。 //Example constOPENAI_API_KEY="s

divボックスモデルとは何ですか divボックスモデルとは何ですか Oct 09, 2023 pm 05:15 PM

div ボックス モデルは、Web ページのレイアウトに使用されるモデルです。Web ページ内の要素を長方形のボックスとして扱います。このモデルには、コンテンツ領域、パディング、ボーダー、マージンの 4 つの部分が含まれています。 div ボックス モデルの利点は、Web ページのレイアウトと要素間の間隔を簡単に制御できることであり、コンテンツ領域、内側の余白、境界線、外側の余白のサイズを調整することで、さまざまなレイアウト効果を実現できます。ボックス モデルには、CSS と JavaScript を通じてボックスのスタイルと動作を動的に変更できるいくつかのプロパティとメソッドも用意されています。

iframeとdivの違いは何ですか iframeとdivの違いは何ですか Aug 28, 2023 am 11:46 AM

iframe と div の違いは、iframe は主に外部コンテンツを導入するために使用され、他の Web サイトからコンテンツをロードしたり、Web ページを複数の領域に分割したりできます。各領域には独自の独立した閲覧コンテキストがあり、div は主に分割および分割するために使用されます。コンテンツを整理し、レイアウトとスタイルを制御するためのブロック。

divとspanの違いは何ですか? divとspanの違いは何ですか? Nov 02, 2023 pm 02:29 PM

違いは次のとおりです: 1. div はブロックレベル要素であり、span はインライン要素です。2. div は自動的に行を占有しますが、span は自動的に折り返されません。3. div はより大きな構造とレイアウトを折り返すために使用されます。テキストまたは他のインライン要素をラップするために、span が使用されます。4. div には他のブロックレベル要素とインライン要素を含めることができ、span には他のインライン要素を含めることができます。

Windows 10 のデスクトップ ダイアログ ボックスを切り替えるショートカット キーとは何ですか? Windows 10 のデスクトップ ダイアログ ボックスを切り替えるショートカット キーの一覧 Windows 10 のデスクトップ ダイアログ ボックスを切り替えるショートカット キーとは何ですか? Windows 10 のデスクトップ ダイアログ ボックスを切り替えるショートカット キーの一覧 Jul 12, 2023 pm 10:29 PM

Windows 10 ユーザーは、コンピューターを使用するときに複数のダイアログ ボックスを開く状況によく遭遇します。マウスでクリックするのは非常に面倒です。では、Windows 10 でデスクトップ ダイアログ ボックスを切り替えるためのショートカット キーは何ですか?ウィンドウを切り替えるには、Alt+Tab を押すだけです。分割画面を設定した後に別のデスクトップに切り替えたい場合は、Win+Ctrl+キーボードの左右を押すだけで素早く切り替えることができ、非常に便利です。 Windows 10 でデスクトップ ダイアログ ボックスを切り替えるためのショートカット キーのリスト: 1. ウィンドウの切り替え: [Alt] + [Tab] 2. タスク ビュー: [Win] + [Tab]、キーボードを放してもページは消えません。 。 3. 新しい仮想デスクトップを作成します: [Win] + [C]

win10インストールソフトで表示されるダイアログボックスを閉じる方法 win10インストールソフトで表示されるダイアログボックスを閉じる方法 Dec 31, 2023 am 11:47 AM

win10システムを使用しているユーザーは、ソフトウェアをインストールするときにダイアログボックスが表示され、非常に面倒ですが、実際には、このダイアログボックスは閉じることができます。おそらくほとんどのユーザーは操作できないと思いますので、一緒に見るためのチュートリアルを用意しました。 win10インストールソフトで表示されるダイアログボックスを閉じる方法。 win10 インストール ソフトウェアでポップアップするダイアログ ボックスを閉じる方法: 1. まず、ショートカット キー「win+r」を押してファイル名を指定して実行を開き、「control」と入力して Enter を押します。 2. 次に、その中の「セキュリティとメンテナンス」を選択します。 3. 次に、左側の「ユーザーアカウント制御設定の変更」をクリックします。 4. 次に、小さな青い四角形を押したままにして、「通知しない」位置まで引き下げて、「OK」をクリックします。

jQueryを使用してdiv要素を追加する簡単な方法 jQueryを使用してdiv要素を追加する簡単な方法 Feb 19, 2024 pm 09:03 PM

シンプルでわかりやすい jQuerydiv 要素の追加テクニック jQuery はフロントエンド開発でよく使われる JavaScript ライブラリの 1 つで、DOM 要素を操作するための便利なメソッドを提供し、ページ要素の追加、削除、変更などの機能を素早く実行できます。 jQueryを利用する際にdiv要素を操作する必要がある場合が多いですが、ここではdiv要素を追加するための簡単で分かりやすいテクニックと具体的なコード例を紹介します。 1. 新しい div 要素を作成して追加します

See all articles