点击后弹出全屏div

Question

我希望能够在点击图标后立即显示一个直接占据整个页面（100vh）的div。

我只想在css中制作它，但因为我希望它从鼠标光标（或图标）出现，也许我还需要一些jQuery？

这个想法是当我点击我的图标时，div会从鼠标光标弹出，就像放大一样，带有过渡动画，不会让它看起来很刺耳。 此外，可以关闭弹出窗口以返回到一般状态。全部在同一个屏幕上，没有重新加载。

我只想在css中完成它，但如果它只能用jQuery我也会接受它

我做了一个小视觉让你理解，因为图像有时比文字更好。

有可能吗？谢谢

Answer 1

在这里，我希望它可以帮到你。虽然它不遵循鼠标/目标div。实际上你可以添加（下面的代码）mousemove函数来将模态/弹出div设置为你的目标点击位置，然后将动画设置为top：0px并保持0px以固定全屏弹出。但如果放大不是来自中心，动画将不会平滑。

var mouseX;
var mouseY;
$(document).mousemove( function(e) {
   mouseX = e.pageX; 
   mouseY = e.pageY;
});  

$('#open-modal').click(function() {
  $('.your-modal').show();
  $('.your-modal').removeClass('animated zoomOut').addClass('animated zoomIn');
});

$('.close-button').click(function() {
  $('.your-modal').removeClass('animated zoomIn').addClass('animated zoomOut').delay(800).fadeOut(400);
});

#open-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.your-modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1111111;
  display: none;
  background: #ffa0a0;
}

.close-button {
  position: fixed;
  z-index: 111111111;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #ffffff;
  border-radius: 50%;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  to {
    opacity: 0;
    display: none!important;
  }
}

.zoomOut {
  animation-name: zoomOut;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="open-modal">Click Here!</a>

<div class="your-modal">
  <div class="close-button"></div>
  Text Here


</div>

Answer 2

我更新了代码。只是为了给你一个开始的例子，所有这些函数都可以在jQuery中找到，所以请花点时间。

//init
$('#myDiv').on('click', handleClick);

$('#myDiv').click(function(e) {
  if ($('#myDiv').hasClass('fullscreen')) {
    $('#myDiv').off('click', handleClick);
  } else {
    $('#myDiv').on('click', handleClick);
  }
});

//handle the 'X' to close
$('.close-icon').on('click', function() {
  $('#myDiv .close-icon').hide();
  $('#myDiv .contentContainer').html('CLICK!');
  $('#myDiv').removeClass('fullscreen');
});

function handleClick() {
  $('#myDiv').addClass('fullscreen');
  $('#myDiv .close-icon').show();
  // delay 1s then change the html inside
  $('#myDiv .contentContainer').delay(1000)
    .queue(function(n) {
      $(this).html('<div class="popcontainer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>');
      n();
    });

}

html,
body {
  padding: 0;
  margin: 0;
}

#myDiv.fullscreen {
  width: 100vw;
  height: 100vh;
  position: fixed;
  transition: 1s ease-in-out;
  cursor: auto;
  z-index: 0;
}

#myDiv {
  background: aqua;
  width: 80px;
  height: 80px;
  transition: 1s ease-in-out;
  cursor: pointer;
}

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

.close-icon {
  float: right;
  margin: 30px;
  cursor: pointer;
  display: none;
  z-index: 100;
}

.popcontainer {
  margin: 20px;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="centered">
  <div id="myDiv">
    <span class="close-icon">&#10006;</span>
    <div class="contentContainer">
      CLICK!
    </div>
  </div>