Jquery 单击时Html元素向右移动-css问题_Jquery_Html_Css_Magnific Popup

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

jquery html css

Jquery 单击时Html元素向右移动-css问题,jquery,html,css,magnific-popup,Jquery,Html,Css,Magnific Popup,我使用jquery弹出窗口向用户显示额外信息。在页面中有一个链接，点击这个链接，我会从上方显示弹出窗口我使用的是弹出窗口现在的问题是，当我点击那个链接时，它会移到右边当页面内容越来越多并且出现垂直滚动条时，就会出现此问题当内容适合页面时，不会出现此类问题 html代码如下所示 // Inline popups $('#inline-popups').magnificPopup({ delegate: 'a', removalDelay: 500, //delay removal

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

我使用的是弹出窗口现在的问题是，当我点击那个链接时，它会移到右边

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

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

html代码如下所示

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

文件：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>

在

body

上设置

overflow-y:scroll

。这样，滚动条的空间总是保留的，即使不需要滚动条。

我最近也遇到了同样的问题。用

悬停

上的

边距：5px

修复了它。

如果您不需要支持IE8及以下版本，这是最容易做到的事情。

这是放大弹出正在做的事情。它在

html

元素上设置

17px

的

margin right

。我不知道为什么，尽管我在GitHub上读到它是一个解决方案。无论如何，您可以使用以下CSS进行修复：

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

在JSFIDLE上设置小提琴。这将使调试变得更容易不，它没有解决，现在我在页面上看到了两个滚动条，一个是原来的滚动条，之前显示过，另外一个是在我设置overflow-y:scroll到标记时添加的。它并没有解决Pero问题。这是唯一一个可以在所有浏览器上运行的修复程序，在过去的几个小时里，我已经尝试了很多。非常感谢@安德烈，不客气！我也很挣扎，所以我想我应该和大家分享。