3

ユーザーに追加情報を表示するために jquery popup を使用しています。ページにはリンクが 1 つあり、それをクリックすると、上部からポップアップが表示されます。

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

3 に答える 3

9

これは Magnific Popup が行っていることです。margin-right要素に of17pxを設定しhtmlます。理由はわかりませんが、GitHub で何かの修正であると読んだことがあります。とにかく、次の CSS で修正できます。

html {
    margin-right: 0 !important;
    overflow: visible !important;
}
于 2014-10-27T20:00:11.553 に答える