弹出框的位置wboxxz

兑换物品与用户体验优化

最新推荐文章于 2019-07-25 21:23:52 发布

goodyatou

最新推荐文章于 2019-07-25 21:23:52 发布

阅读量447

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/goodyatou/article/details/44302149

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Plugins/Wbox/wboxxz.js" type="text/javascript"></script>
<style type="text/css">
.ModelLayout
{
width: 540px;
height: 384px;
background: transparent url('images/tx.jpg') left top no-repeat;
position: absolute;
top: 100px;
left: 0px;
z-index: 99;
padding: 100px 100px;
}

*
{
margin: 0px;
padding: 0px;
}
.icon
{
background-image: url("images/icon.png");
height: 4px;
width: 100%;
float: left;
}
.bkicon
{
background-image: url("images/bk.png");
background-color: transparent;
height: 68px;
width: 202px;
margin-top: 30px;
margin-right: 30px;
}
.bigdiv
{
height: 140px;
width: 100%;
font-family: 黑体;
background-color: #034650;
}
.imgdiv
{
float: left;
padding: 20px;
height: 94px;
width: 94px;
}
.title
{
font-size: 36px;
color: White;
padding-top: 20px;
}
.content
{
font-size: 24px;
color: #35d1cc;
}
.bkper
{
cursor: pointer;
font-size: 34px;
height: 68px;
line-height: 68px;
color: White;
margin-left: 10px;
}
.divsub
{
float: left;
margin-top: 10px;
}
.smallbk
{
background-image: url("images/smallbk.png");
background-color: transparent;
height: 44px;
width: 44px;
margin-left: 30px;
}
.qx
{
background-image: url("images/qx.png");
background-color: transparent;
height: 72px;
width: 214px;
margin-left: 50px;
float: left;
cursor: pointer;
}
.qd
{
background-image: url("images/qd.png");
background-color: transparent;
height: 72px;
width: 214px;
float: left;
cursor: pointer;
}
.popmsg
{
font-size: 36px;
color: White;
height: 150px;
line-height: 70px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 80px; width: 100%; background-color: #005562">
<div style="padding-top: 20px; float: left;">
<div class="smallbk">
<span class="title" style="margin-left: 50px">
<%=bk %></span>
</div>
<div>
<a style="font-size: 34px; color: White; position: absolute; top: 20px; right: 20px;"
href="dhlog.aspx?user_id=<%=userid %>">兑换记录</a>
</div>
</div>
</div>
<div>
<%=userStr%>
</div>
<script language="JavaScript">

function dhbk(title, id, stock, bk) {
var loginStr = '<div class="ModelLayout"><div style="margin-left:-50px;">';
if (stock < 1) {

loginStr += '<div class="popmsg">' + title + '库存不足,请选择其他物品</div>';
}
else {
loginStr += '<div class="popmsg">兑换' + title + '花费' + bk + '确定吗？</div>';
}
loginStr += '<div class="qd" onclick="go(' + id + ')" ></div><div class="qx" onclick="$(\'.ModelLayout\').remove();"></div> </div></div>';
$(".ModelLayout").remove();
$("body").append(loginStr);
$(".ModelLayout").css("left", (($("body").width() - 646) / 2) + "px");
$(".ModelLayout").css("top", (getAbsoluteTop2("bkpop" + id) - getAbsoluteTop("bkpop" + id) + 100) + "px");
}

window.onscroll = function () {
$(".ModelLayout").css("top", document.body.scrollTop + 100 + "px");
}
function getAbsoluteTop(objectId) {
o = document.getElementById(objectId);

oTop = document.getElementById(objectId).getBoundingClientRect().top;
// oTop = o.offsetTop;
// while (o.offsetParent != null) {
// oParent = o.offsetParent
// oTop += oParent.offsetTop // Add parent top position
// o = oParent;
// }
if (oTop < 0) oTop = 0;
return oTop;
}

function getAbsoluteTop2(objectId) {
o = document.getElementById(objectId);
oTop = o.offsetTop;
while (o.offsetParent != null) {
oParent = o.offsetParent
oTop += oParent.offsetTop // Add parent top position
o = oParent;
}
return oTop;
}

function go(id) {
window.location.href = "dhaddress.aspx?id=" + id + "";
}
</script>
</form>
</body>
</html>