如何在ajax中显示通知后设置超时隐藏div

时间:2016-02-02 04:31:44

标签: javascript jquery html css ajax

我有这样的ajax代码:

   function submitHandler() {
       var date=new Date(),
           formorder= document.getElementById("form-order"),
           pack= $("#id_package").val(),
           namepack= $("#name_package").val()
         $.ajax({
           type: 'POST',
           url: '<?php echo $this->baseurl; ?>/index/saveOrder',
           data: {
               pack: pack,
               namepack: namepack
           },
            success: function(msg) {               
               var result = msg;                
               if (result.success=true) {
                   $.gritter.add({
                        title: "Thank You",
                        text: "Your order was inserted. Our team will confirmation your order quickly",
                        class_name: 'gritter-success gritter-center',
                        time : 3000,
                    });
                   formorder.reset();  
   //i want set timeout to hide this '#modal-content' after notification showed.
                   $('#modal-content').modal('hide');
               }           
           }
       });
    }

根据该代码,#modal-content首先隐藏在通知显示之前。我的问题是如何在$('#modal-content').modal('hide');显示后5秒后将$.gritter.add({title: "Thank You"...设置为隐藏。感谢。

3 个答案:

答案 0 :(得分:2)

由于你正在使用jQuery,可以利用延迟

$('#modal-content').delay(5000).modal('hide');

答案 1 :(得分:2)

您可以使用javacript setTimeout方法。 setTimeout允许您在特定时间段后执行一些JavaScript代码。

替换

$('#modal-content').modal('hide');

setTimeout(function () { $('#modal-content').modal('hide'); }, 5000);

答案 2 :(得分:2)

使用after_close函数中的另一个事件gritter.addafter_close更新hide,如下所示。 Lmk如果有效。

               $.gritter.add({
                    title: "Thank You",
                    text: "Your order was inserted. Our team will confirmation your order quickly",
                    class_name: 'gritter-success gritter-center',
                    time : 3000,
                    after_close: function(e, manual_close){ 
                     $('#modal-content').delay(5000).modal('hide');
                    }
                });