Question

这是我的ajax代码，每页有81个产品...
当我点击添加到购物车按钮时，页面中心会出现一个div但是当我在页面的最后或底部添加产品时，div总是出现在页面的中心，我需要向上滚动页面才能看到它。 /> 我希望结果显示在页面上，如果我在页面的底部，我希望div显示在底部。

    <script type="text/javascript" >
        $(function() {
           $('a.addbtn').click(function(e){
                 e.preventDefault(); 
                 var quantity = $(this).attr("qty");
                 var prod_id = $(this).attr("prid");
                 var dataString = '&quantity=' + quantity + '&prod_id=' + prod_id;
                 if(quantity=='' || prod_id==''){
                    alert('some thing went wrong');
                 }
                 else{
                   $.ajax({
                      type: "GET",
                      url: "ajax_checkout.php",
                      data: dataString,
                      cache: false,
                      success: function(html){
                           $('.addcart').remove('');
                           $("#viewr").append(html);
                      }
                   });
                 }
                 return false;
            }); 
        });
    </script>

Answer 1

虽然您可以使用jQuery设置样式并使用inline style设置top，但我始终只使用css并将其放在浏览器的顶部。虽然这意味着，在关闭盒子之前它总会在那里，但它不会被打开。

 .addcart {
      position: fixed;
      top: 10px;
 }

应该做的伎俩

Answer 2

使div查看器的位置固定。像这样：

    #viewr{    
        width:30em;
        height:18em;
        border: 1px solid #ccc;
        background-color: #f3f3f3;
        display:none;
    }

使用你想要的任何课程来设计它现在在jquery中添加这个函数，这将使它出现在屏幕的中心：

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
};

现在，在您的成功功能中，请执行以下操作，以便在一段时间后使其可见且不可见：

success: function(html){
    $('#viewr').html(html);
    $('#viewr').fadeIn('slow').center().delay(2000).fadeOut('slow');
}

不要使用append（），它总是在div中附加html 延迟量以毫秒为单位，因此请将其设置为您需要的任何值这应该可以解决问题

显示出现在我在页面上的位置不仅是中心

2 个答案: