javascript - ajax弹出显示中心在正文中

Question

我想在正文中加载我的弹出中心。我试过这样做。但它不工作。这是我的链接:http://sriads.com/shopping/product/ (点击加入购物车按钮)

此脚本来自: http://dinbror.dk/bpopup/

头型

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/scripting.min.js"></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>

按钮 html

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

ajax.php文件

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

Answer 1

可能 height: auto 应该在这里工作。

#popup 的 CSS:

#popup {
  background-color: #FFF;
  box-shadow: 1px 1px 4px #000;
  display: none;
  height: auto;
  width: 450px;
  font-family: 'Roboto', Arial;
  position: absolute;
  margin: 0 auto;
}