ajax弹出显示中心在主体

ajax popup display center in body

本文关键字：主体 显示 ajax      更新时间：2023-09-26

我想在正文中加载我的弹出中心。我试过了。但它不起作用。这是我的链接：http://sriads.com/shopping/product/（点击Add to Cart按钮）

this script from :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>

可能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;
}

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

#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>
相关文章：