3
Я использую всплывающее окно jquery для отображения дополнительной информации для пользователя. На странице есть одна ссылка, по щелчку которой я показываю всплывающее окно с верхней стороны.Элемент Html сдвигается вправо при нажатии - css issue
Я использую всплывающее окно 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.
});
настроить скрипку на jsfiddle. Было бы проще отлаживать –