Javascript ajax弹出式显示中心在body中

我想在正文中加载我的弹出中心。我已经试过了。但它不起作用。 这是我的链接：（单击

添加到购物车
按钮）

此脚本来自：

头部样式

<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>

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



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>


jQuery（函数（$）{
$（'.button'）。在（'click'，函数（）{
var id=$（this.data（'id'）；
$.ajax({
url:“/shopping/ajax.php”，
数据：{
id:id
},
方法：“POST”，
成功：函数（html）{
$（'body'）.append（html）；
$（html.bPopup（）；
},
错误：函数（返回值）{}
});
});
});

按钮html

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

添加到购物车

ajax.php文件

<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>

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


项目已添加到您的购物车！
可能
高度：auto
应该在这里工作

#弹出窗口的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;
}

要将弹出窗口居中显示到屏幕上，必须设置以下属性-

#popup {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  width: 450px;  // Any fixed width
  height: 300px; // Any fixed height
  ............
  ............
}

使用jquery将弹出窗口居中显示

<script type="text/javascript" >
    $('#popup').position({
            of: $(window)
        });
</script>


$（'#弹出框'）。位置({
总数：$（窗口）
});
对我来说很有用，它就在中间，但这可能有助于发布你在scripting.min.js中应用的样式代码。这是mate的方式，也许可以使用css是否被一些硬编码的css覆盖来检查浏览器元素。我看到一些CSS与div一起编写，我猜它覆盖了这里的属性。查看上面的链接，您似乎喜欢使用javascript动态添加css left和top属性。查看我如何通过注释元素样式中的左侧和顶部css来重新格式化css，并编辑弹出式样式。还可以检查此图像中的更改。css元素消失后，即使您调整屏幕大小，弹出窗口也会一直位于中心。您是否注释掉导致css top and left属性更新的javascript代码？需要查看您的css，而且正如我所说，代码中的css top and left属性是从javascript更新的，只有更改css和加载页面将不起作用。也许你的代码中有一些东西，比如$（'popup'）.css（{'left'：'[some percent value]，'top'：'[some percent value]}）；这使得页面加载或窗口大小调整时，顶部和左侧属性得到更新。注释代码输出和更新的css将起作用。在标记下。。。。我已经编辑了答案。。。。。。请使用正确的弹出div选择器。