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

Question

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

gkd*_*gkd 3 html css jquery css3 magnific-popup

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ale*_*x W 8

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，1 月前
查看次数：	2421 次
最近记录：	11 年前