[英]ajax popup display center in body
I want to load my popup center in body. 我想将弹出中心加载到体内。 I have tried to do that.
我已经尝试过了。 but its not working.
但它不起作用。 Here is my link : http://sriads.com/shopping/product/ (click
Add to Cart
button) 这是我的链接: http : //sriads.com/shopping/product/ (单击“
Add to Cart
按钮)
this script from :
http://dinbror.dk/bpopup/ this script from :
http this script from :
//dinbror.dk/bpopup/
head style 头型
<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 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 按钮html
<button type="button" class="button small cart-button" data-id="2222">Add to Cart</button>
ajax.php file ajax.php文件
<div id="popup">
<div class="inner">
<h2>Item added to your cart!</h2>
<!-- here some html and php codes -->
</div>
</div>
Probably height: auto
should work here. 可能是
height: auto
应该在这里工作。
CSS for #popup
: #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;
}
To center a popup to screen you must have the following properties set like this - 要将弹出窗口居中放置在屏幕上,您必须设置以下属性,如下所示:
#popup {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
width: 450px; // Any fixed width
height: 300px; // Any fixed height
............
............
}
use jquery for center the pop up; 使用jQuery的弹出中心;
<script type="text/javascript" >
$('#popup').position({
of: $(window)
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.