Показать сообщение отдельно
  #2 (permalink)  
Старый 30.04.2014, 12:03
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

juegosfrivs,
а зачем jQuery? выравнивание можно делать и без него...
<style type="text/css">
html, body {
  padding: 0;
  margin: 0;
}

/* для выравнивания блока по вертикали */
.msg-box-wrapper {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* заднее затемнение */
.msg-box-wrapper .shadow {
  position: absolute;
  background-color: #000000;
  opacity: 0.03;
  width: 100%;
  height: 100%;
}

/* для выравнивания блока по горизонтали */
.msg-box-wrapper .msg-box-cell {
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: middle;
}

/* Окно с сообщением */
.msg-box {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #f5f5f5;
  background-color: #ddd;
  box-shadow: 1px 1px 5px #999;
  overflow: hidden;
  text-align: left;
}

/* Заголовок окна */
.msg-box .title {
  background: #ccc;
  border-bottom: 1px solid #aaa;
  padding: 5px;
  font: bold 12px Arial;
}

/* Сообщение */
.msg-box .msg-content {
  font: normal 12px Times;
  padding: 5px;
}

/* Обертка кнопки */
.msg-box .button {
  text-align: center;
  padding: 0 0 5px 0;
}

/* Кнопка */
.msg-box .button button {
  text-shadow: 1px 1px #f1f1f1;
  font: normal 12px Times;
  background-color: #ccc;
  transition: all 300ms linear;
  border: #ddd solid 1px;
  box-shadow: 0 0 1px #aaa;
  border-radius: 4px;
  outline: none;
}

/* Кнопка при наведении мыши */
.msg-box .button button:hover {
  background-color: #eee;
}
</style>

<div class="msg-box-wrapper">
  <div class="shadow"></div>
  <div class="msg-box-cell">
    <div class="msg-box">
      <div class="title">Alert</div>
      <div class="msg-content">Enter your message!</div>
      <div class="button"><button>Ok</button></div>
    </div>
  </div>
</div>

<a href="" onclick="document.querySelector('.msg-box-wrapper').style.display = 'table'; return false;">Открыть Алерт</a>

<script type="text/javascript">
  document.querySelector('.button button').onclick = function() {
    document.querySelector('.msg-box-wrapper').style.display = 'none';
  };
</script>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием