0
我最近一直在用jQuery进行实验并做了一些popup菜单。 当我显示它或当窗口大小调整时，会弹出div的位置。元素在移动设备上的位置不同于桌面上的
我注意到de定位在移动设备上无法正常工作，弹出的div显示的太多了。
为什么这个popup div在移动设备上显示的不同于桌面上的？
下面是一个工作的例子，其在台式电脑正常工作，这里是2倍的图像，展示一下在移动设备上出了问题：
$(document).ready(function() {
$(".button").mouseover(function() {
showPopup();
});
var timeout;
$(".popup").mouseleave(function() {
timeout = setTimeout(function() {hidePopup(500);}, 500);
});
$(".popup").mouseenter(function() {
clearTimeout(timeout);
});
$(".button").click(function() {
togglePopup();
});
$(".closebutton").click(function() {
hidePopup(0);
});
$(window).resize(function() {
positionPopup();
});
});
function positionPopup() {
var pos = $(".button").offset();
var h = $(".button").height();
var w = $(".button").width();
var widthPopUp = $(".popup").width();
var heightPopUp = $(".popup").height();
$(".popup").css({left: pos.left - widthPopUp - 20 - 3 + w, top: pos.top + h + 10});
}
function showPopup() {
positionPopup();
$(".popup").fadeIn(300);
}
function hidePopup(delay) {
if (typeof(delay) === 'undefined') {
delay = 1000;
}
$(".popup").fadeOut(delay);
}
function togglePopup() {
positionPopup();
$(".popup").toggle();
}* {
box-sizing: border-box;
}
html, body {
margin: 0px;
padding: 0px;
}
.container {
width: 500px;
border: 1px solid black;
margin: 50px auto;
height: auto;
position: relative;
border-radius: 2px;
padding: 10px;
padding-top: 25px;
}
.buttonholder {
height: 20px;
width: 20px;
text-align: center;
line-height: 15px;
right: 0px;
top: 0px;
position: absolute;
margin: 3px;
display: block;
}
.button {
cursor: pointer;
}
.popup{
border: #DDDDDD 1px solid;
width: 200px;
height: 40px;
display: none;
position: absolute;
background-color: white;
padding: 10px;
border-radius: 2px;
}
.closebtnholder {
position: absolute;
top: 0px;
right: 0px;
margin: 3px;
text-align: center;
}
.closebutton {
cursor: pointer;
font-size: 10pt;
}
.popup::after {
border-bottom: 8px solid #DDDDDD;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
width: 0;
height: 0;
content: "";
display: block;
position: absolute;
top: -8px;
left: 184px;
}<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="layout.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="buttonholder">
<div class="button">[?]</div>
</div>
Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard
proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters
nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen
overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60
populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk
door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.
</div>
<div class="popup">
<div class="closebtnholder">
<div class="closebutton">[x]</div>
</div>
<a href="http://google.be">google</a>
</div>
<div class="triangle">
</div>
</body>
</html>
感谢您使之更适应，但我仍然有放大的问号恩当点击它同样的问题。任何想法如何解决这一问题？ – maikel