素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: twitter: @javascripter にどうぞ。

modalDialog

var dialog = document.body.appendChild(document.createElement('div'));
var message = dialog.appendChild(document.createElement('p'));
message.textContent = 'てすとてすとてすと。';
var button = dialog.appendChild(document.createElement('button'));
button.textContent = 'OK';
window.addEventListener('click',
function(e) {
  if (e.target == button) {
    dialog.parentNode.removeChild(dialog);
  } else { (function(i) {
      dialog.style.outlineColor = i % 2 ? '#ff0000': '#404040';
      if (i < 6) setTimeout(arguments.callee, 50, i + 1);
    })(0);
    e.preventDefault();
  }
},
true);
with(dialog.style) {
  position = 'fixed';
  zIndex = '9999';
  top = (window.innerHeight - dialog.offsetHeight) / 2 + 'px';
  left = (window.innerWidth - dialog.offsetWidth) / 2 + 'px';
  backgroundColor = '#d4d0c8';
  color = '#000000';
  outline = 'solid 2px #404040';
}
with(button.style) {
  position = 'relative';
  top = '-5px';
  left = (dialog.offsetWidth - button.offsetWidth) / 2 + 'px'
}

こういうコードは、やっぱライブラリとかを使ったほうがぜんぜん楽だし、見た目もいい。