js_javascriptスキルを使用して実装されたカスタムダイアログボックスの実装コード

みなさん、こんにちは。通常 Javascript を使用するとき、ユーザーにフィードバック情報を提供する必要があることがよくあります。この機能を完了するにはさまざまな方法があります。しかし、通常の開発では、おそらくアラート機能が最もよく使用されます (ここでは一般的な状況についてのみ説明します。個々の専門家を除外するものではありません)。この機能を使用すると、インタラクティブな情報を簡単に提供できます。ユーザー。ただし、外観が非常にシンプルで制御できないほか、ブラウザごとに実装される機能であるため、異なるブラウザでは使用できません。全部違う。以前は、この状況はほとんどのユーザーに簡単に受け入れられたかもしれませんが、時間が経つにつれて、ユーザーはますますより良いエクスペリエンスを求めるようになります。さて、多くの Web サイトで JS で作成されたさまざまなダイアログ ボックスをよく見かけます。これらのインターフェイスはユーザー エクスペリエンス

を大幅に改善します。今日はこの点について話しましょう。ナンセンスな話はやめましょう。 ~

まず、直感的に理解できるように効果を示します。


上の図に示すように、テスト後、このダイアログ ボックスは次のようになります。 IE6 7 8、Firefox、Chrome、その他の主流ブラウザーで動作します。みんなで彼のコードを見てみましょう。
まず、ブラウザの種類を決定する必要があります。ここでは、さまざまなブラウザを表すためにいくつかの bool 変数が使用されています。



コードをコピーします

コードは次のとおりです。 var springweb_typeIsIE = false; springweb_typeIsGecko = false; var springweb_typeIsIE6 = false;

var springweb_typeIsIE8 = false; .navigator.userAgent;

if (agent.indexOf("MSIE 6") != -1) {
springweb_typeIsIE6 = true;
springweb_typeIsIE = true; .indexOf("MSIE 7") != -1) {
springweb_typeIsIE7 = true;
}
else if (agent.indexOf("MSIE 8") != - 1) {
springweb_typeIsIE8 = true;
springweb_typeIsIE = true;
else if (agent.indexOf("Firefox") ! = -1) {
springweb_typeIsFireFox = true; >springweb_typeIsGecko = true;
} else if (agent.indexOf("Chrome") != -1) {
springweb_typeIsChrome = true;
}
else if ( Agent.indexOf("Safari") != -1) {
springweb_typeIsSafari = true;
springweb_typeIsWebkit = true;


上記のように、異なるブラウザは次のように判断されます。エージェントヘッダの検出は比較的簡単な判断方法です。
ダイアログ ボックスの構築を開始しましょう。ダイアログ ボックスを構築する前に、まずモーダル フォームの効果を作成する必要があります (つまり、ダイアログ ボックスが表示されると、ユーザーはページ上の残りのコンテンツを操作できなくなります)。 , ここでは、この効果を実現するために黒い透明レイヤーを使用します。




コードをコピー


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


document.body.style.overflowY = " hidden";
var divBackground = document.createElement("div");
divBackground.style.position = "absolute";
divBackground.style.left = "0px";
divBackground.style .top = "0px";

divBackground.style.width = "100%";
if (springweb_typeIsChrome || springweb_typeIsFireFox) {
divBackground .style.backgroundColor = "rgba(0,0,0,0.7)";
} else {

divBackground.style.backgroundColor = "#000000"; opacity=70 )"; } divBackground.style.zIndex = "99"; document.body.appendChild(divBackground); 上記のコードでは、まずブラウザを追加します。ダイアログ ボックスが表示されたときにユーザーがブラウザ ウィンドウをスクロールできないようにするために、スクロール バーを無効にします。次に、最も重要なスタイルの 1 つが 8 ～ 13 行目です。ブラウザの種類に応じて透明効果を実現するため、IE ブラウザの場合は IE に付属のフィルター機能を使用し、その他のブラウザの場合は CSS3 をベースとした rgba 方式を使用して透明効果を実現します。

次に、ダイアログ ボックスを構築する必要があります。ここでは、まずダイアログ ボックス全体を表す div レイヤーを作成します。方法は次のとおりです:

コードをコピーします


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

var ダイアログ幅 = 260;
var ダイアログ高さ = 120;
var fontSize = 14;
var lineWidth = document.body.clientWidth * 0.7;
if ((fontSize * msg.length) < lineWidth) {
dialogWidth = parseInt(fontSize * msg.length) 50;
} else {
dialogWidth = parseInt(lineWidth);
dialogHeight = parseInt(((fontSize * msg.length) / lineWidth) * fontSize);
}
divDialog.style.width = ダイアログ幅 "px";
divDialog.style.height = ダイアログ高さ "px";
divDialog.style.position = "絶対";
divDialog.style.border = "1px ソリッド #C0D7FA";
divDialog.style.borderRight = "2px アウトセット #DEDEDE";
divDialog.style.borderLeft = "2px アウトセット #DEDEDE";
divDialog.style.left = ((document.body.clientWidth / 2) - (dialogWidth / 2)) "px";
divDialog.style.top = ((document.body.clientHeight / 2) - (dialogHeight / 2)) "px";
divDialog.style.zIndex = "100";

ここでは、最初にメッセージの文字数に基づいて话框の尺度を計算しました（ここの計算方法は必ずしも最良ではありません、より良い計算方法がある場合は大家指教を望みます）、後からそれらのDOM代网
続いて、テキスト ボックスのマークを作成し、これを使用してテキスト ボックスの動作操作を実現します。 🎜>

复制代码代码如下:

var divHead = document.createElement("div");

if (タイトル != 未定義) {
divHead.innerHTML = タイトル;
} else {
divHead.appendChild(document.createTextNode("消息"));
}
divHead.style.width = "100%";
divHead.style.height = "25px";
divHead.style.lineHeight = "25px";
divHead.style.fontSize = "14px";
divHead.style.fontWeight = "太字";
divHead.style.borderBottom = "1px アウトセット #8989FF";
divHead.style.color = "白";
divHead.style.textIndent = "10px";
divHead.style.backgroundColor = "青";
divHead.style.backgroundImage = "url('" springweb_basePath "/images/headbg.png')";
divHead.style.cursor = "移動";
divHead.onmousedown = function() {
divDialog.dragging = true;
};
divHead.onmouseup = function() {
divDialog.dragging = false;
};
document.body.onmousemove = function(e) {
if (!divDialog.dragging) return;
e = e ||ウィンドウ.イベント;
var マウス X、マウス Y;
varmouseOffsetX、mouseOffsetY;
if (e.pageX || e.pageY) {
mouseX = e.pageX;
mouseY = e.pageY;
} else {
mouseX =
e.clientX document.body.scrollLeft -
document.body.clientLeft;
mouseY =
e.clientY document.body.scrollTop -
document.body.clientTop;
}
divDialog.style.left = (mouseX - DialogWidth * 0.4) "px";
divDialog.style.top = (mouseY - 10) "px";
};
divDialog.appendChild(divHead);


这里呢，必说一下的就是，鼠标按下弹起イベント，这里给div对象多增追加一ドラッグ的属性，用诹话按在在中（これも JS の特性の 1 つで、オブジェクト タイプのオブジェクトに新しいプロパティを割り当てる方法の 1 つです。つまり、前のオブジェクトにそのプロパティがない場合、オブジェクト名.プロパティ名 = "值" の方法を介してオブジェクトに新しいプロパティを追加する必要があります） 、ネズミの移動イベントでは、私はオブジェクトのドラッグ属性によって、ネズミの移動位置に関して、ネズミの移動の有無を決定しますが、ここではネズミとネズミの相対位置を判断することはありません。このようにして起動が開始されるたびに、テキスト フレームがわずかに「瞬時に移動」しますが、関心のある友人は、一時的にブロックすることができます。 🎜>

复制代码

代码如下:

var divContent = document.createElement("div");
divContent.style.textAlign = "センター";
divContent.style.padding = "15px";
divContent.style.fontSize = "12px";
if (springweb_typeIsIE) {
divContent.style.height = parseInt(dialogHeight - 25) "px";
} else {
divContent.style.height = parseInt(dialogHeight - 55) "px";
}
divContent.style.backgroundColor = "#ffffff";
if (springweb_typeIsIE6 || springweb_typeIsIE7 || springweb_typeIsIE8) {
divContent.style.filter =
"progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#FFFFFF,endColorStr=#C2E2F8)" ;
} else if (springweb_typeIsFireFox) {
divContent.style.backgroundImage =
"-moz-linear-gradient(left,rgba(255,255,255,1),rgba(194,226,248,1))";
} else if (springweb_typeIsWebkit) {
divContent.style.backgroundImage =
"-webkit-gardient(linear,0% 0%,100% 100%,from(#FFFFFF),to(#000000 ))";
}
divContent.innerHTML = msg "

";
divDialog.appendChild(divContent);
var closeButton = document.createElement("img");
closeButton.style.cursor = "手";
closeButton.setAttribute("src", springweb_basePath "/images/okButton.png");
closeButton.setAttribute("alt", "确定");
//ダイアログが閉じるときのクリックイベント。
closeButton.onclick = function() {
document.body.removeChild(divBackground);
document.body.removeChild(divDialog);
document.body.style.overflowY = "";
};
divContent.appendChild(closeButton);
divDialog.focus();
document.body.appendChild(divDialog);

ここでの该不使用多用解了，稍微说一下，是在13-22行的代コード，迪是迪是別别果厰渐効果，IE话，使用微软提供
最後に、この方法はほとんどのブラウザをサポートしますが、完全にサポートできない場合は個別のブラウザもサポートします。谅、期待大家有より完全な方法を一緒に確認し、以下に例を示します。興味のある友人が見ることができます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。