堆栈内存溢出
  繁体   English   中英

CSS弹出窗口不适用于页面的其余部分

[英]CSS popup not applying to rest of page

 原文  2017-06-15 15:24:02  4   2    javascript/ html/ css

问题描述

我有这个CSS弹出窗口，一旦您单击10次，它就会弹出，然后说哇。 这个想法是他们只有10次点击。 弹出窗口使后面的所有内容都不透明。 我的问题是，它仅适用于顶部，而不适用于其余部分。 任何帮助将非常感激。 要查看实际效果，请点击此处

的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="#">&times;</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>

Java脚本 

// 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笔在这里

2 个解决方案

解决方案1
 2 已采纳  2017-06-15 15:29:20

如果我了解最终目标，则需要向叠加层添加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="#">&times;</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>

解决方案2
 0  2017-06-15 15:28:51

如果我正确理解您的知识，则叠加层显示不正确？ 我添加了一个z索引调整来显示淡入淡出。 

.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
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将CSS应用于弹出窗口中的表 fancybox jQuery，弹出后不应用css 将CSS类应用于javascript弹出窗口 无需将CSS应用于整个页面 <head> 标签？ 使用jQuery加载CSS而不将样式应用于页面 <div>单击其余页面后弹出窗口隐藏 带有自定义CSS的页面中的弹出窗口，而不会覆盖页面的CSS show：使用PURE CSS加载页面时的目标弹出窗口 当用户位于页面顶部且具有动画导航时，应用CSS 在页面中包含html文件而不应用原始页面CSS / JS
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM