Question

Я ищу похожую функциональность, такую как Facebook, когда кто-то нажимает кнопку «Отправить сообщение», когда появляется всплывающее окно с текстовой областью, которую могут набирать люди. Хотя я не уверен, как создать оверлей. Я смотрел на такие вещи, как Facebox, но хочу создать что-то самостоятельно. Есть ли у кого-нибудь хорошие примеры или учебные пособия о том, как создать это наложение с большим количеством элементов на странице?

MetalFrog · Answer 1 · 09 декабря 2011

http://jqueryui.com/demos/dialog/#modal-form

Если вы используете jQuery, добавить и использовать пользовательский интерфейс jQuery не так уж далеко. Посмотрите на эту демонстрацию и посмотрите, поможет ли она.

Wex · Answer 2 · 09 декабря 2011

Один из самых чистых модалей есть тот, который представлен в twitter начальной загрузке .Для его реализации вам просто нужно использовать jQuery и modal.js .Согласно вашему дополнительному запросу на оповещения, вам также необходимо добавить alert.js . Если вы не хотите использовать их CSS , это относительно просто.для реализации в вашем CSS:

HTML:

<div class="modal hide fade" id="my-modal">
  <div class="modal-header">
    <a href="#" class="close">&times;</a>
    <h3>Modal Heading</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn primary">Primary</a>
    <a href="#" class="btn secondary">Secondary</a>
  </div>
</div>

<div class="alert-message success hide fade in" data-alert="alert">
    <a class="close" href="#">&times;</a>
    <p><strong>Well done!</strong> You successfully <a href="#">read this</a> alert message.</p>
</div>

JS:

$('#my-modal').modal(true);
$(".alert-message").alert();
$('#my-modal').bind('hidden', function () {
    $(".alert-message").removeClass("hide");
});

Вы можете использовать что-то отличное от bind() для запускаremoveClass() функция.

CSS:

.hide {
  display: none;
}
.fade {
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -ms-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
  opacity: 0;
}
.fade.in {
  opacity: 1;
}
.close {
  float: right;
  color: #000000;
  font-size: 20px;
  font-weight: bold;
  line-height: 13.5px;
  text-shadow: 0 1px 0 #ffffff;
  filter: alpha(opacity=25);
  -khtml-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
}
.close:hover {
  color: #000000;
  text-decoration: none;
  filter: alpha(opacity=40);
  -khtml-opacity: 0.4;
  -moz-opacity: 0.4;
  opacity: 0.4;
}
/* Modal */
.modal-backdrop {
  background-color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop, .modal-backdrop.fade.in {
  filter: alpha(opacity=80);
  -khtml-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 11000;
  width: 560px;
  margin: -250px 0 0 -280px;
  background-color: #ffffff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999;
  /* IE6-7 */

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}
.modal .close {
  margin-top: 7px;
}
.modal.fade {
  -webkit-transition: opacity .3s linear, top .3s ease-out;
  -moz-transition: opacity .3s linear, top .3s ease-out;
  -ms-transition: opacity .3s linear, top .3s ease-out;
  -o-transition: opacity .3s linear, top .3s ease-out;
  transition: opacity .3s linear, top .3s ease-out;
  top: -25%;
}
.modal.fade.in {
  top: 50%;
}
.modal-header {
  border-bottom: 1px solid #eee;
  padding: 5px 15px;
}
.modal-body {
  padding: 15px;
}
.modal-body form {
  margin-bottom: 0;
}
.modal-footer {
  background-color: #f5f5f5;
  padding: 14px 15px 15px;
  border-top: 1px solid #ddd;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 1px 0 #ffffff;
  -moz-box-shadow: inset 0 1px 0 #ffffff;
  box-shadow: inset 0 1px 0 #ffffff;
  zoom: 1;
  margin-bottom: 0;
}
.modal-footer:before, .modal-footer:after {
  display: table;
  content: "";
  zoom: 1;
}
.modal-footer:after {
  clear: both;
}
.modal-footer .btn {
  float: right;
  margin-left: 5px;
}
.modal .popover, .modal .twipsy {
  z-index: 12000;
}
/* Alerts */
.alert-message.danger,
.alert-message.danger:hover,
.alert-message.error,
.alert-message.error:hover,
.alert-message.success,
.alert-message.success:hover,
.alert-message.info,
.alert-message.info:hover {
  color: #ffffff;
}
.alert-message .close {
  font-family: Arial, sans-serif;
  line-height: 18px;
}
.alert-message.danger,
.alert-message.error {
  background-color: #c43c35;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(top, #ee5f5b, #c43c35);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #c43c35 #c43c35 #882a25;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.alert-message.success {
  background-color: #57a957;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -ms-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(top, #62c462, #57a957);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #57a957 #57a957 #3d773d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.alert-message.info {
  background-color: #339bb9;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
  background-image: linear-gradient(top, #5bc0de, #339bb9);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #339bb9 #339bb9 #22697d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
:root .alert-message {
  border-radius: 0 \0;
}
.alert-message {
  position: relative;
  padding: 7px 15px;
  margin-bottom: 18px;
  color: #404040;
  background-color: #eedc94;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
  background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
  background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
  background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
  background-image: -o-linear-gradient(top, #fceec1, #eedc94);
  background-image: linear-gradient(top, #fceec1, #eedc94);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #eedc94 #eedc94 #e4c652;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-style: solid;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.alert-message .close {
  margin-top: 1px;
  *margin-top: 0;
}
.alert-message a {
  font-weight: bold;
  color: #404040;
}
.alert-message.danger p a,
.alert-message.error p a,
.alert-message.success p a,
.alert-message.info p a {
  color: #ffffff;
}
.alert-message h5 {
  line-height: 18px;
}
.alert-message p {
  margin-bottom: 0;
}
.alert-message div {
  margin-top: 5px;
  margin-bottom: 2px;
  line-height: 28px;
}
.alert-message .btn {
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.alert-message.block-message {
  background-image: none;
  background-color: #fdf5d9;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  padding: 14px;
  border-color: #fceec1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.alert-message.block-message ul, .alert-message.block-message p {
  margin-right: 30px;
}
.alert-message.block-message ul {
  margin-bottom: 0;
}
.alert-message.block-message li {
  color: #404040;
}
.alert-message.block-message .alert-actions {
  margin-top: 5px;
}
.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
  color: #404040;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.alert-message.block-message.error {
  background-color: #fddfde;
  border-color: #fbc7c6;
}
.alert-message.block-message.success {
  background-color: #d1eed1;
  border-color: #bfe7bf;
}
.alert-message.block-message.info {
  background-color: #ddf4fb;
  border-color: #c6edf9;
}
.alert-message.block-message.danger p a,
.alert-message.block-message.error p a,
.alert-message.block-message.success p a,
.alert-message.block-message.info p a {
  color: #404040;
}

Предварительный просмотр: http://jsfiddle.net/Wexcode/G7kRH/
Обновленный предварительный просмотр с предупреждением: http://jsfiddle.net/Wexcode/G7kRH/2/

Deviprasad Das · Answer 3 · 09 декабря 2011

Вы можете использовать модальное диалоговое окно jQuery http://jqueryui.com/demos/dialog/#modal-message.

Который прост в использовании и поддерживает тему и множество настроек.

dgvid · Answer 4 · 09 декабря 2011

Вы можете использовать jQuery BlockUI Plugin .Первая демонстрация, Форма входа, на вкладке Демонстрации выглядит примерно так, как вы описали.

Создание оверлея для отправки сообщения

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 4 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Создание оверлея для отправки сообщения

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 4 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы