具有自定义布局的灯箱

Question

我的目标是实现如下图所示的灯箱：

  

黑色是必须“隐藏”且页面不透明的页面，例如.6   红色是具有背景颜色/图像的主框   说明和“ x”都在红色背景上方

它也应该响应。有人可以帮我吗？

到目前为止我已经尝试过的内容：

.modal { 
     display: none; 
     position: absolute;  
     z-index: 998;  
     padding-top: 100px;  
     left: 0; 
     top: 0; 
     width: 100%;  
     height: 100%; 
     overflow: auto;  
     background-color: rgb(0,0,0);  
     background-color: rgba(0,0,0,0.9);  
   text-align: center; 
 } 

 .modal-content { 
     margin: auto; 
     display: block; 
     min-height: 150px; 

   z-index: 999; 
 } 

 .top{ 
   width:100%; 
   top: 0; 
   text-align: right; 
   direction: rtl; 
   position: absolute; 
   height:15px; 
 } 

 .ico{ 
   width:15px; 
   height: 15px; 
   background-color: blue; 
   position: relative; 
 } 

 #caption { 
   width:90%; 
   background-color: rgba(100, 100, 100, 0.7); 
   color: white; 
   padding-left: 16px; 
   text-transform:uppercase; 
   height:50px; 
   margin-top: -50px; 
   z-index: 9999; 
   position: relative; 
 } 

 .modal-content, #caption {     
     -webkit-animation-name: zoom; 
     -webkit-animation-duration: 0.6s; 
     animation-name: zoom; 
     animation-duration: 0.6s; 
 } 

 @-webkit-keyframes zoom { 
     from {-webkit-transform:scale(0)}  
     to {-webkit-transform:scale(1)} 
 } 

 @keyframes zoom { 
     from {transform:scale(0)}  
     to {transform:scale(1)} 
 } 

 .close { 
     position: absolute; 
     top: 15px; 
     right: 35px; 
     color: #f1f1f1; 
     font-size: 40px; 
     font-weight: bold; 
     transition: 0.3s; 
 } 

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

 @media only screen and (max-width: 700px){ 
     .modal-content { 
         width: 100%; 
     } 
 } 

<div id="myModal" class="modal">
    <img class="modal-content" id="modalImage" src="someUrl">
    <div class="top">
      <div class="ico">
        <span class="close">&times;</span>
      </div>
    </div>
    <div id="caption">Lorem Ipsum</div>
  </div>

编辑：由我自己解决。刚刚使用了保证金：自动把戏。感谢您随机投票。

Answer 1

这就是您想要的jQuery：

    $(".show").on("click", function(){
		  $(".mask").addClass("active");
		});

		function closeModal(){
		  $(".mask").removeClass("active");
		}

		$(".close, .mask").on("click", function(){
		  closeModal();
		});

		$(document).keyup(function(e) {
		  if (e.keyCode == 27) {
		    closeModal();
		  }
		});

    .show {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  width: 150px;
		  height: 40px;
		  margin-top: -20px;
		  margin-left: -75px;
		  background: black;
		  color: #fff;
		  cursor: pointer;
		}
		.close {
		  position: absolute;
		  top: 0;
		  right: 0;
		  width: 35px;
		  height: 30px;
		  background: #000;
		  color: #fff;
		  cursor: pointer;
		  border: 0;
		}
		.mask {
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background: rgba(0, 0, 0, 0.6);
		  z-index: 50;
		  visibility: hidden;
		  opacity: 0;
		  transition: 0.7s;
		}
		.modal {
		  position: fixed;
		  top: 50%;
		  left: 50%;
		  width: 400px;
		  height: 300px;
		  margin-left: -200px;
		  margin-top: -150px;
		  background: red;
		  z-index: 100;
		  visibility: hidden;
		  opacity: 0;
		  transition: 0.5s ease-out;
		  transform: translateY(45px);
		}
		.active {
		  visibility: visible;
		  opacity: 1;
		}
		.active + .modal {
		  visibility: visible;
		  opacity: 1;
		  transform: translateY(0);
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="show" aria-haspopup="true">Show</button>

	<div class="mask" role="dialog"></div>
	<div class="modal" role="alert">
		<button class="close" role="button">X</button>
	</div>