ホームページ ウェブフロントエンド 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 = "<span style="font-size:10pt;color:" this.titlecolor ";" style="font-size:10pt;color :" this.titlecolor ";" id='closeBtn'> ×ウィンドウを閉じる";
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 = "<iframe name='frmAlertWin' id='frmAlertWin' src="about:blank " src="about:blank" Frameborder=0 marginwidth=0 marginheight =0 style='height:" (h-this.titleheight-10) "px;width:100%;'></iframe>";
}
msgBox.innerHTML = "<div "text-align:" this.MsgAlign ";">" msg "</div>";
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 までご連絡ください。

ホットな記事タグ

メモ帳++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

CSSを使用してdivの角が欠けていることを認識する方法

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

ChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実装

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

divとspanの違いは何ですか?

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

divボックスモデルとは何ですか

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

iframeとdivの違いは何ですか

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

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

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

win10インストールソフトで表示されるダイアログボックスを閉じる方法

Java エラー: JavaFX ダイアログ エラー、処理方法と回避方法 Java エラー: JavaFX ダイアログ エラー、処理方法と回避方法 Jun 24, 2023 pm 03:08 PM

Java エラー: JavaFX ダイアログ エラー、処理方法と回避方法

See all articles