所以我想建立一个包含3个页面和一个进度条的模式,每当我点击一个按钮时,它就会改变。问题是当我调整浏览器的大小时,进度条会从模式中消失。
这是我的代码:
$( document ).ready(function() {
$('.trigger').click(function() {
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur');
return false;
});
$('.go').click(function () {
$('.pg2').toggleClass('active') ;
}) ;
$('.gg').click(function () {
$('.pg3').toggleClass('active') ;
}) ;
});
var pageIndex = 1;
showPages(pageIndex);
function nextPage(n) {
showPages(pageIndex += n);
}
function showPages(n) {
var i;
var pages = document.getElementsByClassName("pop");
if (n > pages.length) {pageIndex = 1}
if (n < 1) {pageIndex = pages.length}
for (i = 0; i < pages.length; i++) {
pages[i].style.display = "none";
}
pages[pageIndex-1].style.display = "block";
}
@import url(https://fonts.googleapis.com/css?family=Courgette|Oswald);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html, body{
width:100%;
height:100%;
margin:0;
}
.sent{
font-family: Dancing Script, Georgia, Times, serif;
font-size :35px ;
text-align: center;
color:#01bce5 ;
}
.page-wrapper{
width:100%;
height:100%;
background:url(http://feelgrafix.com/data/background/background-1.jpg) center no-repeat;
background-size:cover;
}
.blur{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
a.btn{
width:150px;
display:block;
margin:-25px 0 0 -75px;
padding:1em 0;
position:absolute;
top:50%; left:50%;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
a.go{
width:150px;
display:block;
margin:-25px 0 0 -75px;
padding:1em 0;
position:absolute;
top:60%; left:80%;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
a.gg{
width:200px;
height: 10px;
display:block;
margin:-25px 0 0 -250px;
padding:1em 0;
position:absolute;
top:70%; left:80%;
font:1.125em 'Arial', sans-serif;
font-weight:400;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
.modal-wrapper{
width:100%;
height:100%;
position:fixed;
top:0; left:0;
background:rgba(255,257,153,0.75);
visibility:hidden;
opacity:0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
overflow: hidden;
list-style-position: inside;
}
.modal-wrapper.open{
opacity:1;
visibility:visible;
overflow: hidden;
list-style-position: inside;
}
.modal{
width:600px;
height:600px;
display:block;
margin:50% 0 0 -300px;
position:relative;
top:40%; left:50%;
background:#fff;
opacity:0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
overflow: hidden;
word-break:break-all;
}
.modal-wrapper.open .modal{
margin-top:-200px;
opacity:1;
}
.head{
width:90%;
height:32px;
padding:1.5em 5%;
overflow:hidden;
background:#01bce5;
}
.btn-close{
width:32px;
height:32px;
display:block;
float:right;
}
.btn-close::before, .btn-close::after{
content:'';
width:32px;
height:6px;
display:block;
background:#fff;
}
.btn-close::before{
margin-top:12px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.btn-close::after{
margin-top:-6px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.content{
padding:5%;
}
.flat-button {
position: relative;
width: 150px; height: 60px;
background: #E74C3C;
margin: 0 auto;
margin-top: 40px;
overflow: hidden;
z-index: 1;
cursor: pointer;
transition: color .3s;
/* Typo */
line-height: 60px;
text-align: center;
color: #fff;
}
.flat-button:after {
position: absolute;
top: 90%; left: 0;
width: 100%; height: 100%;
background: #C0392B;
content: "";
z-index: -2;
transition: transform .3s;
}
.flat-button:hover::after {
transform: translateY(-80%);
transition: transform .3s;
}
.round-image{
border-radius:100%;
height: 280px;
margin: 0 auto;
overflow:hidden;
width: 280px;
}
.descrip{
padding:1em 0;
position:absolute;
top:40%;
left:70%;
font:1.125em 'Arial', sans-serif;
text-align:center;
text-decoration:none;
margin:-25px 0 0 -75px;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:350px;
height: 10px;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 5px solid #7d7d7d;
display: block;
text-align: center;
margin: 200px auto 10px auto;
border-radius: 50%;
}
.progressbar li:after {
width: 100%;
height: 7px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 215px;
left: -50%;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #01bce5;
}
.progressbar li.active + li:after {
background-color: #01bce5;
}
.titre{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./main.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="./fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http:////fonts.googleapis.com/css?family=Dancing+Script">
<title></title>
</head>
<body>
<div class="page-wrapper">
<a class="btn trigger" href="javascript:;">Popup!</a>
</div>
<div class="modal-wrapper">
<div class="modal">
<div class="head">
<a class="btn-close trigger" href="javascript:;"></a>
</div>
<div class="content">
<div class="container">
<div class="pop fade">
<div class="text">
<h1 class='sent'>FIRST PAGE </h1>
</div>
<img src="http://i.imgur.com/2ZgHKbQ.jpg" alt="Beach in your dream" class="round-image" >
<p class='descrip'>Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>
<a class="btn go" href='javascript:;' onclick='nextPage(1);'>GO!</a>
</div>
<div class="pop fade">
<div class="text">
<h3 class="titre">Lorem ipsum dolor sit amet</h3>
</div>
<a class="btn gg" href='javascript:;' onclick='nextPage(1);'>GO!</a>
</div>
<div class="pop fade">
<div class="text">
<h1 class='sent'>Inscription</h1>
</div>
</div>
</div>
</div>
</div>
<ul class="progressbar">
<li class="active"></li>
<li class='pg2'></li>
<li class="pg3"></li>
</ul>
</div>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"> </script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="./index.js" type="text/javascript"></script>
</html>
最佳答案
我想你的问题是:
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:350px;
height: 10px;
}
left:350px;
属性正在硬编码一个将进度条推到右边的值。。。我建议使用百分比。创建进度条的列表也在模式视图之外。最好是在里面。最后,如果您正在测试响应式设计,请在您的
<meta name="viewport" content="width=device-width, initial-scale=1">
中添加此元标记head
。当它在移动设备上呈现时,它将帮助您的站点关于javascript - 调整浏览器大小时html页面变得疯狂,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42142088/