我正在使用 jquery 弹出窗口向用户显示额外信息。页面中有一个链接，点击它，我会从上方显示弹出窗口。
我正在使用CodePen 的弹出窗口现在问题是当我单击该链接时，它会移动到右侧。
当页面内容较多且出现垂直滚动条时，就会出现此问题。
当内容适合页面时，不会出现此类问题。
html代码如下。
文件：index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - Pen</title>
<link rel='stylesheet prefetch' href='http://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css'>
<style>
html, body {
margin: 0;
padding: 10px;
-webkit-backface-visibility: hidden;
}
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width: auto;
max-width: 400px;
margin: 0 auto;
}
/*
====== Move-from-top effect ======
*/
.mfp-move-from-top {
/* start state */
/* animate in */
/* animate out */
}
.mfp-move-from-top .mfp-content {
vertical-align: top;
}
.mfp-move-from-top .mfp-with-anim {
opacity: 0;
transition: all 0.2s;
transform: translateY(-100px);
}
.mfp-move-from-top.mfp-bg {
opacity: 0;
transition: all 0.2s;
}
.mfp-move-from-top.mfp-ready .mfp-with-anim {
opacity: 1;
transform: translateY(0);
}
.mfp-move-from-top.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-move-from-top.mfp-removing .mfp-with-anim {
transform: translateY(-50px);
opacity: 0;
}
.mfp-move-from-top.mfp-removing.mfp-bg {
opacity: 0;
}
/* preview styles */
html {
font-family: "Calibri", "Trebuchet MS", "Helvetica", sans-serif;
}
h3 {
margin-top: 0;
font-size: 24px;
}
a,
a:visited {
color: #1760BF;
text-decoration: none;
}
a:hover {
color: #c00;
}
.links li {
margin-bottom: 5px;
}
h4 {
margin: 24px 0 0 0;
}
.bottom-text {
margin-top: 40px;
border-top: 2px solid #CCC;
}
.bottom-text a {
border-bottom: 1px solid #CCC;
}
.bottom-text p {
max-width: 650px;
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<center><h1>Web Assistant</h1></center>
<p>
Page Content 1
</p>
<br>
<br>
<p>
Page Content 2
</p>
<br>
<br>
<p>
Page Content 3
</p>
<br>
<br>
<p>
Page Content 4
</p>
<br>
<br>
<p>
Page Content 5
</p>
<br>
<br><p>
Page Content 6
</p>
<br>
<br>
<p>
Page Content 7
</p>
<br>
<br>
<p>
Page Content 8
</p>
<br>
<br>
<p>
Page Content 9
</p>
<br>
<br>
<p>
Page Content 10
</p>
<br>
<br>
<div id="inline-popups" class="links" style="position:fixed; top:90%; right:5%;">
<a href="#test-popup" data-effect="mfp-move-from-top">See Help</a>
</div>
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">You may put any HTML here. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script src='http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
index.js 文件的代码如下。
// Inline popups
$('#inline-popups').magnificPopup({
delegate: 'a',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});