个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 01:45:50 24 4
gpt4 key购买 nike

我有这个 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="#">&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>

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 笔 here

最佳答案

如果我理解最终目标，您需要将 z-index 添加到叠加层，以便堆叠顺序高于页面上它之后的图 block 。由于叠加层和 .wrap 有一个非static position，叠加层将需要一个 z-index 来出现在 .wrap 上。 1 的 z-index 就足够了。

// 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>

关于javascript - CSS 弹出窗口不适用于页面的其余部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44571371/

24 4 0
文章推荐： javascript - 将 div 设置为在窗口滚动位置更大时不显示
文章推荐： python - Pandas 按小时分组
文章推荐： python - 如何使用 selenium 从内联 css 获取背景图像
文章推荐： php - 如何在 WooCommerce 中对齐添加到购物车按钮？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com