3

CSSとJavaScriptを使用するだけでalert（関数なしで） 、確認するまで画面の残りの部分を無効にするポップアップメッセージを作成しようとしています。

http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspxは、IE8以降でサポートされていると宣言していますsetAttributeが、正しく機能していないようです。実際にはまったく機能していないようです。

これが私のコードです：

<html>

<style type="text/css">

.overlay
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
}

.overlaytext
{
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
width: 300px;
height: 100px;
padding-top: 5px;
background-color: #777777;
color: #000000;
font-size: 20px;
text-align: center;
}

.overlaybutton
{
position: absolute;
left: 50%;
margin-left: -30px;
top: 50%;
margin-top: 20px;
width: 60px;
height: 25px;
border: solid;
border-color: #000000;
border-width: 1px;
background-color: #999999;
color: #000000;
font-size: 20px;
}

</style>

<script type="text/javascript">

function showoverlay(message)
{
var overlay = document.createElement('div');
overlay.setAttribute('id','overlay');
overlay.setAttribute('class','overlay');
document.body.appendChild(overlay);

var overlaytext = document.createElement('div');
overlaytext.setAttribute('id','overlaytext');
overlaytext.setAttribute('class','overlaytext');
overlaytext.innerHTML = message;
document.body.appendChild(overlaytext);

var overlaybutton = document.createElement('input');
overlaybutton.setAttribute('type','button');
overlaybutton.setAttribute('id','overlaybutton');
overlaybutton.setAttribute('class','overlaybutton');
overlaybutton.setAttribute('value','OK');
overlaybutton.setAttribute('onclick','deleteoverlay()');
document.body.appendChild(overlaybutton);
}

function deleteoverlay()
{
var elem = document.getElementById('overlay');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaytext');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaybutton');
elem.parentNode.removeChild(elem);
}

</script>

<body>

<input type="button" value="Show message" onclick="showoverlay('Message text')"/>

</body>
</html>

FirefoxとChromeでは問題なく動作しますが、IE（IE9でテスト）はsetAttribute、テキストとボタンのみを入力し、書式設定を行わず（つまり、class適用されなかった）、新しく作成されたボタンをクリックするため、このメソッドを無視しているようです。オブジェクトを削除しません（つまり、id適用されなかったか、オブジェクトを削除するコードの部分との追加の非互換性があります）。

私はこのように交換しようとしましたsetAttribute：

<script type="text/javascript">

function showoverlay(message)
{
var overlay = document.createElement('div');
overlay.id = 'overlay';
overlay.class = 'overlay';
document.body.appendChild(overlay);

var overlaytext = document.createElement('div');
overlaytext.id = 'overlaytext';
overlaytext.class = 'overlaytext';
overlaytext.innerHTML = message;
document.body.appendChild(overlaytext);

var overlaybutton = document.createElement('input');
overlaybutton.type = 'button';
overlaybutton.id = 'overlaybutton';
overlaybutton.class = 'overlaybutton';
overlaybutton.value = 'OK';
overlaybutton.onclick = 'deleteoverlay()';
document.body.appendChild(overlaybutton);
}

function deleteoverlay()
{
var elem = document.getElementById('overlay');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaytext');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaybutton');
elem.parentNode.removeChild(elem);
}

</script>

ただし、今回はテキストとボタンも追加しません。

では、このスクリプトをIEと互換性のあるものにし、すべての要素を表示してから削除するにはどうすればよいでしょうか。

ありがとう

4

3 に答える 3

7

これをDoctypeとして使用します

<!DOCTYPE html>

次に、これをドキュメントの先頭に配置します

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

そして、setAttributeIE8+環境で適切に動作することを可能にする他の多くの機能の使用を楽しんでください。

于 2013-03-11T00:49:56.240 に答える
5

2番目の例でクラスを設定する正しい方法は次のとおりです。

overlaybutton.className = 'overlaybutton';

これにより、クラスがIEで機能するようになります。要素を削除する限り、イベント処理の添付ファイルを次のように再フォーマットすることをお勧めします。

overlaybutton.onclick = deleteoverlay;
于 2013-03-11T00:20:35.047 に答える
1

私もこの問題に遭遇しました。サイトにjQueryを含めることができる場合は、を使用できます$('#overlay').attr('class', 'overlay');。jQueryは、クロスブラウザー互換のコードを作成するのに非常に役立ちます。

于 2013-03-11T00:09:32.387 に答える