ajax popup display center in body

I want to load my popup center in body.. i try to do that. but its not work.. here is my link : http://ift.tt/1IER9Hj (click Add to Cart button)

head style

<script src="http://ift.tt/1xDNnh9"></script>
<script src="http://ift.tt/1IER8Tw"></script>
<script src="http://ift.tt/1HpeT5C"></script>

Jquery

<script>
      jQuery(function ($) {

        $('.button').on('click', function () {
            var id = $(this).data('id');

            $.ajax({
                url: '/shopping/ajax.php',
                data: {
                    id: id
                },
                method: 'POST',
                success: function (html) {
                    $('body').append(html);
                    $(html).bPopup();
                },
                error: function (returnValue) {}
            });
        });


    });
</script>

button html

<button type="button" class="button small cart-button" data-id="2222">Add to Cart</button>

ajax.php file

<div id="popup">
  <div class="inner">
  <h2>Item added to your cart!</h2>
  <!-- here some html and php codes -->
  </div>
</div>