dialog

by Евгений

HTML

<a href="#" onclick="showalertdiv('blue','Внимание','ты внимателен?','Нет','','ДА','alert(2)'); return false">синий</a>

<div id="alert" class="dialog"></div>

CSS

.blue .dialog-title {
  background: #22226A;
}

.blue .dialog-title span {
  color: #ddd;
}

.red .dialog-title {
  background: #FF0000;
}

.red .dialog-title span {
  color: #ddd;
}

.gray .dialog-title {
  background: #aaa;
}

.gray .dialog-title span {
  color: #333;
}

.red,
.blue,
.gray {
  display: block;
}

.dialog {
  display: none;
}

.dialog,
.gray,
.red,
.blue {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  background: url("http://designchat.ru/img/bg_alert.png") repeat scroll 0 0 transparent;
  color: #222222;
  padding: 10px;
  position: fixed;
  z-index: 10;
  width: 350px;
  top: 100px;
  left: 150px;
}

.dialog-title {
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  -khtml-border-radius: 5px 5px 0px 0px;
  border: 1px solid #000000;
  border-style: solid solid none;
  padding: 5px 3px 3px 11px;
  display: block;
  position: relative;
  height: 14px;
  font-weight: bold;
}

.dialog-content {
  background: #eee;
  border: 1px solid #000000;
  border-style: none solid;
  color: #333;
  padding: 20px 10px;
}

.dialog-buttonpane {
  border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  -khtml-border-radius: 0px 0px 5px 5px;
  background: #e1e1e1;
  border-color: #000000;
  border-style: none solid solid;
  border-width: medium 1px 1px;
  padding: 0.3em 1em 0.5em 0.4em;
  text-align: center;
  color: #222;
}

.dialog-button {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  cursor: pointer;
  padding: 2px 7px;
  background: url("http://designchat.ru/img/bg_glass.png") repeat-x scroll 50% 50% #E6E6E6;
  border: 1px solid #D3D3D3;
  color: #555555;
  font: 12px normal Verdana, Arial, sans-serif;
}

.dialog-button:hover {
  background: url("http://designchat.ru/img/bg_glass_dadada.png") repeat-x scroll...

JavaScript

function showalertdiv(alert_type, title, text, b1, b1act, b2, b2act) { //alert_type = red, blue, gray, dialog
  if (alert_type == 'red' || alert_type == 'blue' || alert_type == 'gray' || alert_type == 'dialog') {
    var buttset = '';
    if (b1 != '' && b1act != '') buttset += '<button type="button" class="dialog-button" onclick="' + b1act + '"><span class="button-text">' + b1 + '</span></button>';
    if (b2 != '' && b2act != '') buttset += '<button type="button" class="dialog-button" onclick="' + b2act + '"><span class="button-text">' + b2 + '</span></button>';
    var div1 = '<div class="dialog-title"><span class="dialog-title-span" id="dialog-title">' + title + '</span><a href="#" class="close" onclick="this.parentNode.parentNode.className=&quot;dialog&quot;; return false">&times;</a></div><div id="dialog-content" class="dialog-content" scrolltop="0" scrollleft="0">' + text + '</div><div class="dialog-buttonpane"><div class="dialog-buttonset">' + buttset + '</div></div>';
    var d = document.getElementById('alert'); //parent.left.
    d.innerHTML = div1;
    d.className = alert_type;
  }
}