我有这个css弹出窗口，一旦你点击10次弹出然后说哇。这个想法是他们只有10次点击。弹出窗口使其后面的一切都不透明。我遇到的问题是它只适用于顶部而不适用于其余部分。任何帮助将非常感激。要查看其实际效果，请点击here
CSS
@import url(http://weloveiconfonts.com/api/?family=brandico);
/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background: black;
min-height: 100%;
font-family: "Arial", sans-serif;
}
.wrap {
position: relative;
height: 100%;
min-height: 500px;
padding-bottom: 20px;
}
.game {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 500px;
perspective: 500px;
min-height: 100%;
height: 100%;
}
@-webkit-keyframes matchAnim {
0% {
background: #bcffcc;
}
100% {
background: white;
}
}
@keyframes matchAnim {
0% {
background: #bcffcc;
}
100% {
background: white;
}
}
.card {
float: left;
width: 16.66666%;
height: 22%;
padding: 5px;
text-align: center;
display: block;
-webkit-perspective: 500px;
perspective: 500px;
position: relative;
cursor: pointer;
z-index: 00;
-webkit-tap-highlight-color: transparent;
}
.card1 {
float: left;
width: 16.66666%;
height: 24%;
padding: 5px;
padding-top: 20px;
text-align: center;
display: block;
-webkit-perspective: 500px;
perspective: 500px;
position: relative;
cursor: pointer;
z-index: 0;
-webkit-tap-highlight-color: transparent;
}
@media (max-width: 800px) {
.card {
width: 25%;
height: 16.666%;
}
}
.card .inside {
width: 100%;
height: 100%;
display: block;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
background: white;
}
.card .inside.picked, .card .inside.matched {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card .inside.matched {
-webkit-animation: 1s matchAnim ease-in-out;
animation: 1s matchAnim ease-in-out;
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.card .front, .card .back {
border: 1px solid black;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
}
.card .front img, .card .back img {
max-width: 100%;
display: block;
margin: 0 auto;
max-height: 100%;
}
.card .front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
@media (max-width: 800px) {
.card .front {
padding: 5px;
}
}
@media (max-width: 800px) {
.card .back {
padding: 10px;
}
}
.modal-overlay {
display: none;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal {
display: none;
position: relative;
width: 500px;
height: 400px;
max-height: 90%;
max-width: 90%;
min-height: 380px;
margin: 0 auto;
background: white;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
padding: 30px 10px;
}
.modal .winner {
font-size: 80px;
text-align: center;
font-family: "Anton", sans-serif;
color: #4d4d4d;
text-shadow: 0px 3px 0 black;
}
@media (max-width: 480px) {
.modal .winner {
font-size: 60px;
}
}
.modal .restart {
font-family: "Anton", sans-serif;
margin: 30px auto;
padding: 20px 30px;
display: block;
font-size: 30px;
border: none;
background: #4d4d4d;
background: -webkit-linear-gradient(#4d4d4d, #222);
background: linear-gradient(#4d4d4d, #222);
border: 1px solid #222;
border-radius: 5px;
color: white;
text-shadow: 0px 1px 0 black;
cursor: pointer;
}
.modal .restart:hover {
background: -webkit-linear-gradient(#222, black);
background: linear-gradient(#222, black);
}
.modal .message {
text-align: center;
}
.modal .message a {
text-decoration: none;
color: #28afe6;
font-weight: bold;
}
.modal .message a:hover {
color: #56c0eb;
border-bottom: 1px dotted #56c0eb;
}
.modal .share-text {
text-align: center;
margin: 10px auto;
}
.modal .social {
margin: 20px auto;
text-align: center;
}
.modal .social li {
display: inline-block;
height: 50px;
width: 50px;
margin-right: 10px;
}
.modal .social li:last-child {
margin-right: 0;
}
.modal .social li a {
display: block;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
border-radius: 5px;
}
.modal .social li a.facebook {
background: #3b5998;
}
.modal .social li a.facebook:hover {
background: #4c70ba;
}
.modal .social li a.google {
background: #D34836;
}
.modal .social li a.google:hover {
background: #dc6e60;
}
.modal .social li a.twitter {
background: #4099FF;
}
.modal .social li a.twitter:hover {
background: #73b4ff;
}
footer {
height: 20px;
position: absolute;
bottom: 0;
width: 100%;
z-index: 0;
}
footer .disclaimer {
line-height: 20px;
font-size: 12px;
color: #727272;
text-align: center;
}
@media (max-width: 767px) {
footer .disclaimer {
font-size: 8px;
}
}
HTML
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Memory Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Anton'>
<link rel="stylesheet" href="css/style.css">
<script>
function reload() {
location.reload();
}
var number = 10;
document.onclick = function() {
number--;
if (number > -1) {
document.getElementById("clicks").innerHTML = number;
(number == 0) && (location.hash = '#popup1')
}
};
</script>
<style>
.card4 {
background: #fff;
border-radius: 2px;
display: inline-block;
height: 50px;
margin: 1rem;
position: inherit;
width: 100px;
z-index: 5; !important
}
.card-4 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.overlay1 {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay1:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 20px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
z-index: 99; !important
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 0px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
z-index: 99; !important
}
</style>
</head>
<br /><br />
<center>
<div class="card4 card-4">
<p class="noselect"> Tries to go: <span id="clicks">10</span></p>
</center>
<div id="popup1" class="overlay1">
<div class="popup">
<h2>WOW!</h2>
<a class="close" href="#">×</a>
<div class="content">
<p class="noselect"><center>Lets see how you did!!</center></p>
</div>
</div>
</div>
<div class="wrap">
<div class="game"></div>
<div class="modal-overlay">
<div class="modal">
<h2 class="winner">You Rock!</h2>
<button class="restart">Play Again?</button>
<p class="message">Developed on <a href="https://codepen.io">CodePen</a> by <a href="https://codepen.io/natewiley">Nate Wiley</a></p>
<p class="share-text">Share it?</p>
<ul class="social">
<li><a target="_blank" class="twitter" href="https://twitter.com/share?url=https://codepen.io/natewiley/pen/HBrbL"><span class="brandico-twitter-bird"></span></a></li>
<li><a target="_blank" class="facebook" href="https://www.facebook.com/sharer.php?u=https://codepen.io/natewiley/pen/HBrbL"><span class="brandico-facebook"></span></a></li>
<li><a target="_blank" class="google" href="https://plus.google.com/share?url=https://codepen.io/natewiley/pen/HBrbL"><span class="brandico-googleplus-rect"></span></a></li>
</ul>
</div>
</div>
</div>
<center><br />
<button onclick="reload()">Reload page</button>
</center>
<footer>
<p class="disclaimer">All logos are property of their respective owners, No Copyright infringement intended.</p>
</footer>
</div><!-- End Wrap -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
的Javascript
// Memory Game
// © 2014 Nate Wiley
// License -- MIT
// best in full screen, works on phones/tablets (min height for game is 500px..) enjoy ;)
// Follow me on Codepen
(function(){
var Memory = {
init: function(cards){
this.$game = $(".game");
this.$modal = $(".modal");
this.$overlay = $(".modal-overlay");
this.$restartButton = $("button.restart");
this.cardsArray = $.merge(cards, cards);
this.shuffleCards(this.cardsArray);
this.setup();
},
shuffleCards: function(cardsArray){
this.$cards = $(this.shuffle(this.cardsArray));
},
setup: function(){
this.html = this.buildHTML();
this.$game.html(this.html);
this.$memoryCards = $(".card");
this.binding();
this.paused = false;
this.guess = null;
},
binding: function(){
this.$memoryCards.on("click", this.cardClicked);
this.$restartButton.on("click", $.proxy(this.reset, this));
},
// kinda messy but hey
cardClicked: function(){
var _ = Memory;
var $card = $(this);
if(!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")){
$card.find(".inside").addClass("picked");
if(!_.guess){
_.guess = $(this).attr("data-id");
} else if(_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")){
// $(".picked").addClass("matched");
_.guess = null;
} else {
_.guess = null;
_.paused = true;
setTimeout(function(){
// to keep cards over change to matched or just delete
$(".picked").removeClass("");
// changed false to true
Memory.paused = false;
}, 600);
}
if($(".matched").length == $(".card").length){
_.win();
}
}
},
win: function(){
this.paused = true;
setTimeout(function(){
Memory.showModal();
Memory.$game.fadeOut();
}, 1000);
},
showModal: function(){
this.$overlay.show();
this.$modal.fadeIn("slow");
},
hideModal: function(){
this.$overlay.hide();
this.$modal.hide();
},
reset: function(){
this.hideModal();
this.shuffleCards(this.cardsArray);
this.setup();
this.$game.show("slow");
},
// Fisher--Yates Algorithm -- https://bost.ocks.org/mike/shuffle/
shuffle: function(array){
var counter = array.length, temp, index;
// While there are elements in the array
while (counter > 0) {
// Pick a random index
index = Math.floor(Math.random() * counter);
// Decrease counter by 1
counter--;
// And swap the last element with it
temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
},
buildHTML: function(){
var frag = '';
this.$cards.each(function(k, v){
frag += '<div class="card" data-id="'+ v.id +'"><div class="inside">\
<div class="front"><img src="'+ v.img +'"\
alt="'+ v.name +'" /></div>\
<div class="back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/codepen-logo.png"\
alt="Codepen" /></div></div>\
</div>';
});
return frag;
}
};
var cards = [
{
name: "horse",
img: "http://img.izismile.com/img/img2/20091105/animals_white_background_12.jpg",
id: 1,
},
{
name: "dog",
img: "http://ontariospca.ca/templates/ospca/images/bg-dog-image.png",
id: 2
},
{
name: "big thing",
img: "http://www.worldanimalfoundation.net/i/bison.jpg",
id: 3
},
{
name: "polar bear",
img: "http://image.fg-a.com/animals/polar-bear.jpg",
id: 4
},
{
name: "turtle",
img: "http://15858-presscdn-0-65.pagely.netdna-cdn.com/wp-content/uploads/sites/default/files/images/Turtle.jpg",
id: 5
},
{
name: "Toucan",
img: "https://upload.wikimedia.org/wikipedia/commons/4/44/Keel-billed_Toucan-27527.jpg",
id: 6
},
{
name: "Turkey",
img: "https://i0.wp.com/freepngimages.com/wp-content/uploads/2016/12/turkey-transparent-background-image.png?fit=624%2C509",
id: 7
},
{
name: "rat",
img: "http://www.dictie.ro/wp-content/uploads/2015/05/cartoon-mouse-and-cheese-04.jpg",
id: 8
},
{
name: "tiger",
img: "https://i.ytimg.com/vi/qXD058okIkA/maxresdefault.jpg",
id: 9
},
{
name: "wolf",
img: "https://s-media-cache-ak0.pinimg.com/736x/f6/39/f3/f639f31e38d404d402e55afd720fbe17.jpg",
id: 10
},
{
name: "teddy bear",
img: "http://downloadclipart.org/do-upload/clipart/2015-12/Animal_Clipart_Pictures.png",
id: 11
},
{
name: "snake",
img: "http://legacy.citybeat.com/cincinnati/imgs/media.images/19366/wwe.widea.jpg",
id: 12
},
];
Memory.init(cards);
})();
Codepen.io pen here
答案 0 :(得分：2)
如果我了解最终目标，则需要在叠加层中添加z-index，以便堆叠顺序高于页面上的拼贴顺序。由于叠加层和.wrap具有非static position，因此叠加层需要z-index才能显示在.wrap上方。 z-index 1就足够了。
// Memory Game
// © 2014 Nate Wiley
// License -- MIT
// best in full screen, works on phones/tablets (min height for game is 500px..) enjoy ;)
// Follow me on Codepen
(function(){
var Memory = {
init: function(cards){
this.$game = $(".game");
this.$modal = $(".modal");
this.$overlay = $(".modal-overlay");
this.$restartButton = $("button.restart");
this.cardsArray = $.merge(cards, cards);
this.shuffleCards(this.cardsArray);
this.setup();
},
shuffleCards: function(cardsArray){
this.$cards = $(this.shuffle(this.cardsArray));
},
setup: function(){
this.html = this.buildHTML();
this.$game.html(this.html);
this.$memoryCards = $(".card");
this.binding();
this.paused = false;
this.guess = null;
},
binding: function(){
this.$memoryCards.on("click", this.cardClicked);
this.$restartButton.on("click", $.proxy(this.reset, this));
},
// kinda messy but hey
cardClicked: function(){
var _ = Memory;
var $card = $(this);
if(!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")){
$card.find(".inside").addClass("picked");
if(!_.guess){
_.guess = $(this).attr("data-id");
} else if(_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")){
// $(".picked").addClass("matched");
_.guess = null;
} else {
_.guess = null;
_.paused = true;
setTimeout(function(){
// to keep cards over change to matched or just delete
$(".picked").removeClass("");
// changed false to true
Memory.paused = false;
}, 600);
}
if($(".matched").length == $(".card").length){
_.win();
}
}
},
win: function(){
this.paused = true;
setTimeout(function(){
Memory.showModal();
Memory.$game.fadeOut();
}, 1000);
},
showModal: function(){
this.$overlay.show();
this.$modal.fadeIn("slow");
},
hideModal: function(){
this.$overlay.hide();
this.$modal.hide();
},
reset: function(){
this.hideModal();
this.shuffleCards(this.cardsArray);
this.setup();
this.$game.show("slow");
},
// Fisher--Yates Algorithm -- https://bost.ocks.org/mike/shuffle/
shuffle: function(array){
var counter = array.length, temp, index;
// While there are elements in the array
while (counter > 0) {
// Pick a random index
index = Math.floor(Math.random() * counter);
// Decrease counter by 1
counter--;
// And swap the last element with it
temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
},
buildHTML: function(){
var frag = '';
this.$cards.each(function(k, v){
frag += '<div class="card" data-id="'+ v.id +'"><div class="inside">\
<div class="front"><img src="'+ v.img +'"\
alt="'+ v.name +'" /></div>\
<div class="back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/codepen-logo.png"\
alt="Codepen" /></div></div>\
</div>';
});
return frag;
}
};
var cards = [
{
name: "horse",
img: "http://img.izismile.com/img/img2/20091105/animals_white_background_12.jpg",
id: 1,
},
{
name: "dog",
img: "http://ontariospca.ca/templates/ospca/images/bg-dog-image.png",
id: 2
},
{
name: "big thing",
img: "http://www.worldanimalfoundation.net/i/bison.jpg",
id: 3
},
{
name: "polar bear",
img: "http://image.fg-a.com/animals/polar-bear.jpg",
id: 4
},
{
name: "turtle",
img: "http://15858-presscdn-0-65.pagely.netdna-cdn.com/wp-content/uploads/sites/default/files/images/Turtle.jpg",
id: 5
},
{
name: "Toucan",
img: "https://upload.wikimedia.org/wikipedia/commons/4/44/Keel-billed_Toucan-27527.jpg",
id: 6
},
{
name: "Turkey",
img: "https://i0.wp.com/freepngimages.com/wp-content/uploads/2016/12/turkey-transparent-background-image.png?fit=624%2C509",
id: 7
},
{
name: "rat",
img: "http://www.dictie.ro/wp-content/uploads/2015/05/cartoon-mouse-and-cheese-04.jpg",
id: 8
},
{
name: "tiger",
img: "https://i.ytimg.com/vi/qXD058okIkA/maxresdefault.jpg",
id: 9
},
{
name: "wolf",
img: "https://s-media-cache-ak0.pinimg.com/736x/f6/39/f3/f639f31e38d404d402e55afd720fbe17.jpg",
id: 10
},
{
name: "teddy bear",
img: "http://downloadclipart.org/do-upload/clipart/2015-12/Animal_Clipart_Pictures.png",
id: 11
},
{
name: "snake",
img: "http://legacy.citybeat.com/cincinnati/imgs/media.images/19366/wwe.widea.jpg",
id: 12
},
];
Memory.init(cards);
})();@import url(http://weloveiconfonts.com/api/?family=brandico);
/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background: black;
min-height: 100%;
font-family: "Arial", sans-serif;
}
.wrap {
position: relative;
height: 100%;
min-height: 500px;
padding-bottom: 20px;
}
.game {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 500px;
perspective: 500px;
min-height: 100%;
height: 100%;
}
@-webkit-keyframes matchAnim {
0% {
background: #bcffcc;
}
100% {
background: white;
}
}
@keyframes matchAnim {
0% {
background: #bcffcc;
}
100% {
background: white;
}
}
.card {
float: left;
width: 16.66666%;
height: 22%;
padding: 5px;
text-align: center;
display: block;
-webkit-perspective: 500px;
perspective: 500px;
position: relative;
cursor: pointer;
z-index: 00;
-webkit-tap-highlight-color: transparent;
}
.card1 {
float: left;
width: 16.66666%;
height: 24%;
padding: 5px;
padding-top: 20px;
text-align: center;
display: block;
-webkit-perspective: 500px;
perspective: 500px;
position: relative;
cursor: pointer;
z-index: 0;
-webkit-tap-highlight-color: transparent;
}
@media (max-width: 800px) {
.card {
width: 25%;
height: 16.666%;
}
}
.card .inside {
width: 100%;
height: 100%;
display: block;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
background: white;
}
.card .inside.picked, .card .inside.matched {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card .inside.matched {
-webkit-animation: 1s matchAnim ease-in-out;
animation: 1s matchAnim ease-in-out;
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.card .front, .card .back {
border: 1px solid black;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
}
.card .front img, .card .back img {
max-width: 100%;
display: block;
margin: 0 auto;
max-height: 100%;
}
.card .front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
@media (max-width: 800px) {
.card .front {
padding: 5px;
}
}
@media (max-width: 800px) {
.card .back {
padding: 10px;
}
}
.modal-overlay {
display: none;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal {
display: none;
position: relative;
width: 500px;
height: 400px;
max-height: 90%;
max-width: 90%;
min-height: 380px;
margin: 0 auto;
background: white;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
padding: 30px 10px;
}
.modal .winner {
font-size: 80px;
text-align: center;
font-family: "Anton", sans-serif;
color: #4d4d4d;
text-shadow: 0px 3px 0 black;
}
@media (max-width: 480px) {
.modal .winner {
font-size: 60px;
}
}
.modal .restart {
font-family: "Anton", sans-serif;
margin: 30px auto;
padding: 20px 30px;
display: block;
font-size: 30px;
border: none;
background: #4d4d4d;
background: -webkit-linear-gradient(#4d4d4d, #222);
background: linear-gradient(#4d4d4d, #222);
border: 1px solid #222;
border-radius: 5px;
color: white;
text-shadow: 0px 1px 0 black;
cursor: pointer;
}
.modal .restart:hover {
background: -webkit-linear-gradient(#222, black);
background: linear-gradient(#222, black);
}
.modal .message {
text-align: center;
}
.modal .message a {
text-decoration: none;
color: #28afe6;
font-weight: bold;
}
.modal .message a:hover {
color: #56c0eb;
border-bottom: 1px dotted #56c0eb;
}
.modal .share-text {
text-align: center;
margin: 10px auto;
}
.modal .social {
margin: 20px auto;
text-align: center;
}
.modal .social li {
display: inline-block;
height: 50px;
width: 50px;
margin-right: 10px;
}
.modal .social li:last-child {
margin-right: 0;
}
.modal .social li a {
display: block;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
border-radius: 5px;
}
.modal .social li a.facebook {
background: #3b5998;
}
.modal .social li a.facebook:hover {
background: #4c70ba;
}
.modal .social li a.google {
background: #D34836;
}
.modal .social li a.google:hover {
background: #dc6e60;
}
.modal .social li a.twitter {
background: #4099FF;
}
.modal .social li a.twitter:hover {
background: #73b4ff;
}
footer {
height: 20px;
position: absolute;
bottom: 0;
width: 100%;
z-index: 0;
}
footer .disclaimer {
line-height: 20px;
font-size: 12px;
color: #727272;
text-align: center;
}
@media (max-width: 767px) {
footer .disclaimer {
font-size: 8px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Memory Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Anton'>
<link rel="stylesheet" href="css/style.css">
<script>
function reload() {
location.reload();
}
var number = 10;
document.onclick = function() {
number--;
if (number > -1) {
document.getElementById("clicks").innerHTML = number;
(number == 0) && (location.hash = '#popup1')
}
};
</script>
<style>
.card4 {
background: #fff;
border-radius: 2px;
display: inline-block;
height: 50px;
margin: 1rem;
position: inherit;
width: 100px;
z-index: 5; !important
}
.card-4 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.overlay1 {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 1;
}
.overlay1:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 20px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
transition: all 5s ease-in-out;
z-index: 99; !important
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 0px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
z-index: 99; !important
}
</style>
</head>
<br /><br />
<center>
<div class="card4 card-4">
<p class="noselect"> Tries to go: <span id="clicks">10</span></p>
</center>
<div id="popup1" class="overlay1">
<div class="popup">
<h2>WOW!</h2>
<a class="close" href="#">×</a>
<div class="content">
<p class="noselect"><center>Lets see how you did!!</center></p>
</div>
</div>
</div>
<div class="wrap">
<div class="game"></div>
<div class="modal-overlay">
<div class="modal">
<h2 class="winner">You Rock!</h2>
<button class="restart">Play Again?</button>
<p class="message">Developed on <a href="https://codepen.io">CodePen</a> by <a href="https://codepen.io/natewiley">Nate Wiley</a></p>
<p class="share-text">Share it?</p>
<ul class="social">
<li><a target="_blank" class="twitter" href="https://twitter.com/share?url=https://codepen.io/natewiley/pen/HBrbL"><span class="brandico-twitter-bird"></span></a></li>
<li><a target="_blank" class="facebook" href="https://www.facebook.com/sharer.php?u=https://codepen.io/natewiley/pen/HBrbL"><span class="brandico-facebook"></span></a></li>
<li><a target="_blank" class="google" href="https://plus.google.com/share?url=https://codepen.io/natewiley/pen/HBrbL"><span class="brandico-googleplus-rect"></span></a></li>
</ul>
</div>
</div>
</div>
<center><br />
<button onclick="reload()">Reload page</button>
</center>
<footer>
<p class="disclaimer">All logos are property of their respective owners, No Copyright infringement intended.</p>
</footer>
</div><!-- End Wrap -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
答案 1 :(得分：0)
如果我理解正确，叠加层显示不正确？我添加了一个z-index调整，用于显示淡入淡出。
.overlay1 {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 1000;<---This
}