ホームページ  >  記事  >  ウェブフロントエンド  >  ボタンをクリックした後に透明なフローティングレイヤーをポップアップするJavaScriptメソッド

ボタンをクリックした後に透明なフローティングレイヤーをポップアップするJavaScriptメソッド

PHPz
PHPzオリジナル
2016-05-16 15:59:481074ブラウズ

この記事の例では、JavaScript を使用してボタンをクリックした後に透明なフローティング レイヤーをポップアップする方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

ここでは、クリックするとページが灰色になり、JS を使用して中央にフローティング レイヤー プロンプト ウィンドウが表示されます。このウィンドウは透明であり、透明度を設定できます。インターネット上の JavaScript コードから学ぶことができます。

浮动层居中的对话框效果演示'+sTitle+
  ((bCancel)?
  '':'')+
  '\n' + sHTML;
 dg.innerHTML = sHTML;
 var dbg = document.createElement("div");
 dbg.id = "nd-bdg";
 dbg.className = "neat-dialog-bg";
 var dgc = document.createElement("div");
 dgc.className = "neat-dialog-cont";
 dgc.appendChild(dbg);
 dgc.appendChild(dg);
 if (document.body.offsetLeft > 0)
 dgc.style.marginLeft = document.body.offsetLeft + "px";
 document.body.appendChild(dgc);
 if (bCancel) document.getElementById("nd-cancel").onclick = function()
 {
  window.neatDialog.close();
 };
 this.elt = dgc;
 window.neatDialog = this;
 }
}
NeatDialog.prototype.close = function()
{
 if (this.elt)
 {
 this.elt.style.display = "none";
 this.elt.parentNode.removeChild(this.elt);
 }
 window.neatDialog = null;
}
function openDialog()
 {
var sHTML = '你现在看到的是一个层窗口,是被JS控制弹出的'+
  '关闭';
 new NeatDialog(sHTML, "你知道吗?", false);
}
" _ue_custom_node_="true">

【関連チュートリアルの推奨事項】

1. JavaScript ビデオ チュートリアル
2.マニュアル3.
ブートストラップ チュートリアル

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