我正在使用 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.
});
最佳答案
这是 Magnific Popup 正在做的事情。它在 html 元素上设置了 17px 的 margin-right。我不确定为什么，尽管我在 GitHub 上读到它可以解决某些问题。无论如何，您可以使用以下 CSS 进行修复:
html {
margin-right: 0 !important;
overflow: visible !important;
}
关于jquery - 单击时 HTML 元素向右移动 - css 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19114817/