Создать всплывающее окно оповещения, анимированное определенным образом?

Ответ 1

Здесь идея Энди утончена с горизонтальным центрированием.

HTML:

<form><div id="message"></div>
   <input> Label 1<br/><br/>
   <input> Label 2<br/><br>
   <textarea>Larger text area</textarea><br/><br/>
   <textarea>And another</textarea><br/><br/>
<button type="button">Submit</button>

CSS

form { 
   position:relative; 
   width:500px;}
#message { 
   position:absolute;
   display:none;
   height:100px;
   width:200px;
   border: 1px gray solid;
   background-color:lime;
   font-size: 1.4em;
   line-height:100px;
   text-align:center;
   border-radius: 5px;
   bottom: 100px;}

Функция центрирования:

(function($) {
$.fn.extend({
    center: function() {
        return this.each(function() {
            var left = ($(window).width() - $(this).outerWidth()) / 2;
            $(this).css({
                position: 'absolute',
                margin: 0,
                left: (left > 0 ? left : 0) + 'px'
            });
        });
    }
});})(jQuery);

Call-центр:

$("#message").center();

Нажмите функцию:

$("button").click(function() {
var msg = $("#message");
msg.text("Item saved!")
msg.hide()
msg.stop(true, true).fadeIn('slow').animate({
    "bottom": "4px",
    "height": "17px",
    "font-size": "1em",
    "left": "80px",
    "line-height": "17px",
    "width": "100px"
}).delay(2000).fadeOut('slow').css({
    "height": "100px",
    "width": "200px",
    "font-size": "1.4em",
    "line-height": "100px",
    "bottom": "100px"
}).center();});​

http://jsfiddle.net/2qJfF/

Ответ 2

Я собрал для вас доказательство концепции, используя jsFiddle:

http://jsfiddle.net/kAhXd/1/ (теперь анимация сбрасывается, нажмите кнопку отправки)

Вам нужно хорошо взглянуть на CSS, но важно отметить, что позиция элемента <form> установлена ​​на относительную, а позиция элемента сообщения установлена ​​в абсолютную. Это необходимо для того, чтобы позиция элемента сообщения всегда относилась к элементу формы.

HTML

<form><div id="message"></div>
    <input> Label 1<br/><br/>
    <input> Label 2<br/><br>
    <textarea>Larger text area</textarea><br/><br/>
    <textarea>And another</textarea><br/><br/>
    <button type="button">Submit</button>
</form>​

CSS

form { position:relative; width:500px; }
#message { 
    position:absolute;
    display:none;
    height:100px;
    width:200px;
    border: 1px gray solid;
    background-color:lime;
    font-size: 1.4em;
    line-height:100px;
    text-align:center;
    left: 150px;
    bottom:100px; 
    border-radius: 5px;
}    ​

JavaScript

$("button").click(function () {
    var msg = $("#message");
    msg[0].style.cssText = "";
    msg.text("Item saved!");
    msg.fadeIn('slow').animate({
        "bottom": "3px",
        "height": "17px",
        "font-size": "1em",
        "left": "80px",
        "line-height": "17px",
        "width": "100px"
    });
});​

Ответ 3

Я бы использовал jQuery. Здесь шаги, которые я предприму, чтобы приблизиться к этому:

• Введите базовый HTML-код для начала, включая необходимые поля <form> и <input>.
• Создайте пустой div для сохраненного уведомления элемента. <div id="item_saved">Item Saved!</div> и по умолчанию будет display:none.
• Добавьте JavaScript, чтобы выполнить проверку формы, чтобы убедиться, что входы имеют то, что вы ожидаете.
• В форме save code я ожидаю, что вы будете использовать Ajax. В обратном вызове успеха вызовите функцию, которая вносит изменения в #item_saved. Первоначально измените видимость элемента и примените класс, который дает ему начальное положение во втором изображении.
• Используйте функцию jQuery animate. Вы захотите изменить положение и размеры. Пользовательский интерфейс jQuery расширяет функцию анимации, чтобы предоставить дополнительные возможности: посмотрите анимированные демонстрации.

Обновление: Отредактировано для предоставления дополнительной информации и более прямого ответа на вопрос.