jquery - 重新定位 jQuery 警报

Question

想知道如何在下面的表单中重新定位 jQuery 警报。目前它会弹出在浏览器的最顶部，就在地址栏下方。如果可能的话，最好让它靠近屏幕中心。我对 jQuery 非常缺乏经验，因此非常感谢您的帮助。

提前谢谢您!苏珊

{% if template contains 'product' and product.available %}
<script>
jQuery('form[action^="/cart/add"]').submit(function() {
  var product = {{ product | json }},
    cannotAddThisQuantity = false,
    message = 'So Sorry! You must have gotten the last one!  We do not have any more %t in stock.',
    selectedVariantId = jQuery(this).find('[name="id"]').val(),
    quantityToAdd = parseInt(jQuery(this).find('[name="quantity"]').val(), 10) || 1,
    quantityInCart = 0,
    title = '';
    inventoryLimited = false,
    inventory = 0;      
 for (var i=0; i<product.variants.length; i++) {
   if (product.variants[i].id == selectedVariantId) {
     var variant = product.variants[i];;
     title = product.title;
     if (product.variants.length > 1) title += ' - ' + variant.title; 
     if (variant.inventory_management && variant.inventory_policy == 'deny') {
     inventoryLimited = true;
     inventory = product.variants[i].inventory_quantity;
   }
  }     
 }
 if (inventoryLimited) {
   {% if cart.item_count > 0 %}
   var cart = {{ cart | json }};
   for (var i=0; i<cart.items.length; i++) {
     if (cart.items[i].id == selectedVariantId) {
       quantityInCart = cart.items[i].quantity;
    }     
  }
  {% endif %}
  if ((inventory - quantityInCart) < quantityToAdd) {
    message = message.replace('%q', quantityToAdd).replace('%t', title);
    if (quantityToAdd > 1) message.replace('item', 'items');
    cannotAddThisQuantity = true;
   }
  }
  if (cannotAddThisQuantity) {
    alert(message);
    return false;
  }
  else {
    return true;
}
});    
</script>

Answer 1

不要使用alert()，而是将“消息”放入自定义div中，然后您可以将其放置在任何您想要的位置

jQuery

if (cannotAddThisQuantity) {
  $('.myAlertDiv').html(message).fadeIn();
  return false;
}

CSS

.myAlertDiv{
  position: absolute;
  top: 100px;
  left: 100px;
  display: none;
  *etc...*
}

显然将 CSS 更改为您想要的任何内容。 。 .