javascript - 如何使 JS/Jquery 透视效果在模态中起作用？

Question

我怎样才能让下面的这种效果发生在模态中？我尝试了很多方法，似乎我错过了一些东西。当我将所有内容放在 .wrap div 中的“MODAL CONTENT”div 中时，它不再显示在任何地方。然后，当我更正 css 以正确定位模态时#myModal modal-content .wrap {...，内容只是显示为彼此相邻的图像。我完全不知道为什么会这样？有人可以解释我如何在模态pls中完成这项工作吗？

var lFollowX = 0,
    lFollowY = 0,
    x = 0,
    y = 0,
    friction = 1 / 30;

function moveBackground() {
  x += (lFollowX - x) * friction;
  y += (lFollowY - y) * friction;
  
  translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

  $('.bg').css({
    '-webit-transform': translate,
    '-moz-transform': translate,
    'transform': translate
  });

  window.requestAnimationFrame(moveBackground);
}

$(window).on('mousemove click', function(e) {

  var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
  var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
  lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
  lFollowY = (10 * lMouseY) / 100;

});

moveBackground();


//////////////////////////////////////////////////MODAL/////////////////////////////////////////////////////////////
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

body {
  height: 100vh;
}

h1 {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  font-size: 7vmin;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}

.wrap {
  background-color: #0F2044;
  -webkit-perspective: 100px;
          perspective: 100px;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.wrap .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>MODAL CONTENT</p>
    
  </div>
</div>


<div class="wrap">
  <div class="bg">
    <img class="front" src="https://shannels.com/fg.svg">
    <div class="bg">
      <img class="front" src="https://shannels.com/mg.svg">
      <div class="bg">
        <img class="front" src="https://shannels.com/bg.svg">
      </div>
    </div>
  </div>
</div>

标签： javascriptjqueryhtmlcss

Answer 1

将包装器移动到模态内容中，然后您需要制作它position:absolute并制作模态内容position:relative，然后调整z-index和width/height

var lFollowX = 0,
  lFollowY = 0,
  x = 0,
  y = 0,
  friction = 1 / 30;

function moveBackground() {
  x += (lFollowX - x) * friction;
  y += (lFollowY - y) * friction;

  translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

  $('.bg').css({
    '-webit-transform': translate,
    '-moz-transform': translate,
    'transform': translate
  });

  window.requestAnimationFrame(moveBackground);
}

$(window).on('mousemove click', function(e) {

  var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
  var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
  lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
  lFollowY = (10 * lMouseY) / 100;

});

moveBackground();


//////////////////////////////////////////////////MODAL/////////////////////////////////////////////////////////////
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

body {
  height: 100vh;
}

h1 {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  font-size: 7vmin;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.wrap {
  background-color: #0F2044;
  -webkit-perspective: 100px;
  perspective: 100px;
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  top:0;
  left:0;
  z-index:-1;
}

.wrap .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  position:relative;
  /* Could be more or less, depending on screen size */
  z-index:0;
  color:#fff;
}


/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="wrap">
      <div class="bg">
        <img class="front" src="https://shannels.com/fg.svg">
        <div class="bg">
          <img class="front" src="https://shannels.com/mg.svg">
          <div class="bg">
            <img class="front" src="https://shannels.com/bg.svg">
          </div>
        </div>
      </div>
    </div>
    <span class="close">&times;</span>
    <p>MODAL CONTENT</p>
    <p>MODAL CONTENT</p>
    <p>MODAL CONTENT</p>
    <p>MODAL CONTENT</p>
    <p>MODAL CONTENT</p>
    <p>MODAL CONTENT</p>

  </div>
</div>