Currently, I am utilizing a jQuery popup to present additional information to users. The setup involves having a link on the page that triggers the popup to appear from the top.
The popup script being used is sourced from CodePen. However, an issue arises when clicking on the link causing it to shift to the right.
This problem surfaces specifically when the page's content extends beyond the viewport, resulting in a vertical scrollbar.
No such shifting occurs if the content fits within the visible area of the page.
The HTML code snippet is provided below:
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>
...
</body>
</html>
Here is the code snippet for the 'index.js' file:
// 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.
});