ポップアップ・プロンプト・レイヤ

2344 ワード

JavaScript jquery css

Javascriptの勉強を始めるためのヒントはすべてAlertです.変わらないスタイルが嫌で、サイト全体のスタイルと違和感があります.ユーザー体験もよくありません.
ポップアップレイヤのコンポーネントを書き直し、カスタマイズできるところがたくさんあります.
書くのは簡単ですが、実際にはStyelを直接設定せずにClassを設定し、Cssでコントロールのスタイルを制御します.
消去レイヤを繰り返し生成せずに隠すのは、破棄を繰り返し生成するとオーバーヘッドが大きいためです.

<script language="javascript" defer>function getPageSize(){
var winWidth = document.documentElement.clientWidth;
var winHeight = document.documentElement.clientHeight;
var pageWidth = document.documentElement.scrollWidth;
var pageHeight = document.documentElement.scrollHeight;
var width = pageWidth>winWidth?pageWidth:winWidth;
var height = pageHeight>winHeight?pageHeight:winHeight;
return {"width":width,"height":height};
}
function makeAlert(message){
	var alertPanel = document.getElementById("alt");
	if(!alertPanel){
		alertPanel = document.createElement("div");
		alertPanel.setAttribute('id','alt');
		var pageSize = getPageSize();
		alertPanel.style.left = pageSize.width/2 - 250 + "px";
		alertPanel.style.top = pageSize.height/2 + "px";
		alertPanel.style.width = "500px";
		alertPanel.style.height = "300px";
		alertPanel.style.position = "absolute";
		alertPanel.style.padding = "50px";
		alertPanel.style.backgroundColor = '#EFEFEF';
		alertPanel.style.filter = "alpha(opacity=30)";
		alertPanel.style.opacity = "0.3";
		alertPanel.innerHTML = "<div style='height:150px;background-color:#CCC;'>"+message+"</div><div style='height:65px;padding:15px;background-color:#BBB;text-align:center'><input value='Close' type='button' onclick='closeAlert()'/></div>";
		document.body.appendChild(alertPanel);
	}
	alertPanel.style.display = "";
	
}
function closeAlert(){
	var alertPanel = document.getElementById("alt");
	alertPanel.style.display = "none";
}
</script>
<body><input type="button" value="Pop" onClick="makeAlert('haha');"/></body>

ブラウザの互換性に関する問題

Asp.Net Ajax---HoverMenuコントロール使用