Question

通常，当用户点击“保存”按钮时，它会弹出一个小绿框或某种动画，表示＆＃39;成功保存＆＃39; 。我怎么能在我的AJAX success？

中做这样的事情

我使用.each()循环和wordpress来处理多个东西，你可以忽略它另外，我想知道我可以事先在按钮内制作动画吗，我试过了.html()，但它不起作用，它必须是.val()

jQuery的：

jQuery.each( elements, function(text_name, text_number){
    $('#' + text_name + '_save_button').on('click', function(){
        var cure_textarea = $('#' + text_name + '_t').val();
        var data = { 
            action        : 'cure_way_textarea',
            text_number   : text_number,
            cure_textarea : cure_textarea,
            userVoteNonce : UserAjaxVote.userVoteNonce,
        };
        $.ajax({
            url        : UserAjaxVote.ajaxurl,
            type       : 'POST',
            cache      : false,
            data       : data,
            beforeSend : function() {
                $('#' + text_name + '_save_button').val('saving...');
            },
            success    : function(data){
                $('#' + text_name + '_save_button').val('Save');
            }
        });//ajax

HTML：

<input type="button" id="good_save_button" value="save"/>

Answer 1

制作这样的弹出窗口并不太难。我所做的是首先在html中创建弹出窗口：

<div class="success-popup">Success!</div>

现在CSS：

.success-popup{
  position:absolute;
  left:50%;
  margin-left:-150px;
  width:300px;
  height:200px;
  background:green;
  color:white;
  z-index:100;
  display:none;
}

然后在AJAX调用的成功函数中，我只显示弹出窗口。然后我设置一个计时器在几秒钟之后关闭，这将再次隐藏它。

//this is in the 'success' function for an ajax post
$('.success-popup').show();
  setTimeout(function(){
  $('.success-popup').hide();
},3000)

这将有效地显示绿色弹出文字＆＃34;成功＆＃34;在屏幕中间，3秒后将其删除。当然你可以改变位置和时间。我一直都在使用这段代码。

Answer 2

您可以使用bootstrap模式 http://getbootstrap.com/javascript/#modals

并在成功函数中调用modal：

success: function(data){
   $('#saveModal .modal-title').text('Saved!');
   $('#saveModal .modal-body p').text('Save ok.');
   $('#saveModal').modal('show');
}

我的英语不好，所以我希望你能理解并忽略我的错误。

如何在AJAX调用后制作弹出框动画？

2 个答案: