Окно состояния jquery всплывает и скрывается через некоторое время

#jquery

Вопрос:

Я пытаюсь создать окно состояния с помощью jquery, поэтому у меня есть кнопка, и при нажатии на кнопку окно состояния всплывает с сообщением типа «кнопка нажата» и исчезает через 10 секунд, но я не уверен, как это сделать. Я думаю, что код может быть похож:

   <input type="button" id="status" value = "show status box"/>

  <script>
   $("#status").click(function(){
      //not sure what should be inside?
     }
   </script>

Ответ №1:

Что-то вроде этого?

HTML

 <button id="status">show status box</button>
<div id="statusmessage"></div>

css

 #statusmessage{
    position:fixed;
    bottom:0;
    padding:0 5px;
    line-height:25px;
    background-color:#eeee99;
    margin-bottom:-25px;
    font-weight:bold;
    left:0;
    right:0;
}

и jquery

 $("#status").click(function() {
    $('#statusmessage').text('#status button was clicked..').animate({'margin-bottom':0},200);
    setTimeout( function(){
        $('#statusmessage').animate({'margin-bottom':-25},200);
    }, 5*1000);
});

демо-версия на http://jsfiddle.net/s3fcy/1 /

Ответ №2:

Другая форма. Мне нравится genesis, но для большего разнообразия

 $("#new_box").show(200, function(){ 
  setTimeout(function(){ $("#new_box").hide(200) }, 10000) 
});

Ответ №3:

Это может быть так просто или так сложно, как вы хотите. вы могли бы даже создавать элементы динамически

http://jsfiddle.net/8pqTz/

 $("input").click(function(){
    $("<div></div>").css({
    }).html("<div></div>").find("div").css({
        position:"fixed",
        width:"100%",
        height:"100%",
        left:"0px",
        top:"0px",
        background:"black",
        opacity:0.4
    }).parent().append("<div class='modal'></div>").find(".modal").css({
        width:"200px",
        height:"80px",
        position:"fixed",
        left:"50%",
        top:"50%",
        marginLeft:"-100px",
        marginTop:"-55px",
        background:"white",
        padding:"5px 10px",
        borderTop:"20px solid steelblue"
    }).text(this.id   " was pressed.").parent()
        .appendTo("body")
        .click(function(){
            $(this).remove();
        }).hide(0).fadeIn(100);
});

пожалуйста, простите за уродливый код … это просто для того, чтобы доказать свою точку зрения, и да, классы были бы лучше. 😛

1. Привет, Джозеф, спасибо за твой ответ, я хочу знать, хочу ли я добавить кнопку в модальное поле на основе твоего кода, как это сделать, можешь просто показать мне свой код выше, большое тебе спасибо.

Ответ №4:

 <script>
$("#status").click(function(){
      $("#new_box").show(0).delay(10000).hide(0);
});
</script>

Примечание сбоку: в конце не хватает одной скобки )