Question

我正在使用jquery popup向用户显示额外信息。页面中有一个链接，点击它，我从上方显示弹出窗口。

我正在使用CodePen的弹出窗口现在的问题是，当我点击该链接时，它会移到右侧。

当页面内容更多并且出现垂直滚动条时，会出现此问题。

当内容适合页面时，不会出现此类问题。

html代码如下。

file：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.
});

Answer 1

这是Magnific Popup正在做的事情。它在margin-right元素上设置17px html。我不知道为什么，虽然我已经在GitHub上看到它是一个修复的东西。无论如何，您可以使用以下CSS修复：

html {
    margin-right: 0 !important;
    overflow: visible !important;
}

Answer 2

在body集overflow-y: scroll上。这样，即使不需要滚动条，滚动条的空间也始终保留。

Answer 3

我最近遇到了同样的问题。修正了margin:5px上的hover。如果您不需要支持IE8及以下版本，这是最简单的事情。

单击时，Html元素向右移动--css问题

3 个答案: