HTML元素轉變點擊時正確的 - CSS問題

我使用jquery彈出的用戶顯示額外的信息。頁面中有一個鏈接，點擊該鏈接，我從上面顯示彈出窗口。HTML元素轉變點擊時正確的 - CSS問題

我使用CodePen的彈出式菜單現在的問題是，當我點擊該鏈接時，它移動到右側。

這個問題到圖片時，網頁的內容越來越出現垂直滾動條。

當內容嵌入到頁面中，沒有這樣的問題arised。

HTML代碼如下。

文件：index.html的index.js文件的

<!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>

代碼如下所示。

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

來源

2013-10-01 Ghanshyam K Dobariya

在jsfiddle上設置了一個小提琴。這將使它更容易調試 –

在body集合overflow-y: scroll。這樣，即使不需要滾動條，滾動條的空間也始終保留。

來源

2013-10-01 11:31:09 SKeurentjes

沒有它沒有解決，現在2滾動條我在頁上，一個是原來的，之前顯示，和一個額外的，當我設置溢出 - y：滾動到標記。它沒有解決peroblem .. –

-2

我最近有完全相同的問題。修復了margin:5px的問題hover。如果你不需要支持IE8及以下版本，這是最容易做的事情。

來源

2013-10-01 11:42:21 SAiNT

這是值得彈出Magnific酒店正在做。它在html元素上設置margin-right的17px。我不確定爲什麼，雖然我在GitHub上看過這是一個解決方案。無論如何，你可以修復以下CSS：

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

來源

2014-10-27 20:00:11

只有在所有瀏覽器工作的修復，我嘗試了相當過去幾個小時數。非常感謝！ – Andrei

@Andrei不客氣！我也爲此苦苦掙扎，所以我想我會分享。 –

HTML元素轉變點擊時正確的 - CSS問題

回答

相關問題