【发布时间】：2021-10-28 05:21:12
【问题描述】：
我正在https://johnmurgo.com 启动我的投资组合网站，当我点击打开一个项目时，会出现一个模式。在移动浏览器中，当 Modal 打开时，关闭按钮不会出现在右上角。我仍然可以单击应该关闭它的区域，但视觉上该按钮不存在。我弄乱了 z-index，但它似乎没有效果。
在 chrome 开发工具中模拟移动设备时，一切正常，但似乎无法转移到实际的移动设备上。
const portfolioContainer = document.querySelector(".portfolio-items");
portfolioContainer.addEventListener("click", e => {
const modalToggle = e.target.closest(".portfolio-link");
e.preventDefault();
if(! modalToggle) return;
const modal = modalToggle.parentNode.nextElementSibling;
const closeButton = modal.querySelector(".modal-close");
const modalOpen = _ => {
modal.classList.add("is-open");
modal.style.animation = "modalFadeIn 250ms forwards";
document.body.style.overflowY = "hidden";
};
const modalClose = _ => {
modal.classList.remove("is-open");
modal.removeEventListener("animationend", modalClose);
};
closeButton.addEventListener("click", _ => {
modal.style.animation = "modalFadeOut 250ms forwards";
modal.addEventListener("animationend", modalClose);
document.body.style.overflowY = "scroll";
});
document.addEventListener("keydown", e => {
if ( e.keyCode === 27 ) {
modal.style.animation = "modalFadeOut 250ms forwards";
modal.addEventListener("animationend", modalClose);
document.body.style.overflowY = "scroll";
}
});
modalOpen();
});.portfolio {
background: rgb(125, 125, 125);
}
.portfolio-items {
display: flex;
flex-wrap: wrap;
margin: 5vh auto 0 auto;
padding-bottom: 5vh;
}
.portfolio-item {
flex: 1 1 32%;
grid-column: span 4;
overflow: hidden;
position: relative;
}
.portfolio-item::before {
box-shadow: inset 6px 6px 0 rgb(0 0 0 / 10%), inset -6px -6px 0 rgb(0 0 0 / 10%);
content: "";
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 98;
}
.portfolio-item .image-title {
padding: 2vw;
background: rgba(25, 25, 25, 0.75);
color: white;
position: absolute;
top: 100%;
bottom: 0;
right: 0;
left: 0;
text-align: left;
transition: top ease-in-out 250ms;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
z-index: 99;
}
.portfolio-item:hover .image-title {
top: 0;
}
.portfolio-item:focus .image-title {
top: 0;
outline: none;
}
.continue-button {
font-weight: 400;
margin-top: 2vw;
}
.portfolio-title {
font-size: 4vw;
line-height: 95%;
}
.portfolio-thumb {
display: block;
height: 24vw;
object-fit: cover;
position: relative;
width: 100%;
}
.portfolio-link {
align-self: flex-start;
background: transparent;
border: none;
color: white;
cursor: pointer;
display: flex;
flex-direction: column;
font-weight: 700;
font-size: 2vw;
height: 100%;
justify-content: center;
overflow: hidden;
text-align: left;
text-decoration: none;
width: 100%;
}
@supports (display: grid) {
.portfolio-items {
display: grid;
gap: 2vw;
grid-template-columns: repeat(12, 1fr); }
}
.portfolio-modal {
background: white;
display: none;
box-shadow: 0 0 0 10vw rgba(0, 0, 0, 0.65);
overflow-y: scroll;
overflow-x: hidden;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 200;
}
.is-open {
display: block;
}
.modal-close {
background: transparent;
border: 0;
cursor: pointer;
position: fixed;
right: 2vw;
top: 1vw;
width: 2em;
z-index: 300;
}
.modal-close:hover .cls-1 {
fill: rgba(91, 196, 221, 1);
}
.cls-1 {
fill: rgba(14, 14, 14, 0.5);
filter: drop-shadow(-1px 1px 1px rgba(14, 14, 14, 0.5))
drop-shadow(-1px 1px 1px rgba(220, 220, 220, 0.5));
pointer-events: none;
}
.gray-space::after {
background: rgb(175, 175, 175);
content: "";
display: block;
height: 5vw;
margin-top: 5vw;
width: 100vw;
}
.white-image::after {
margin-top: 0;
}
.modal-title-box {
background: rgb(175, 175, 175);
color: rgb(175, 175, 175);
padding: 3vw 12.5vw;
text-shadow: -1px 1px 1px rgba(14, 14, 14, 0.5),
1px -1px 1px rgba(220, 220, 220, 0.5);
width: 100%;
}
.modal-item-title {
font-size: 12vw;
}
.modal-subtitle {
font-size: 5vw;
}
.modal-text-row {
background: rgb(175, 175, 175);
padding-bottom: 5vw;
}
.modal-text {
background: white;
color: rgb(125, 125, 125);
font-family: crimson text, serif;
padding: 0 2vw 0 2vw;
}
.modal-text:nth-child(n+2) {
padding-top: 2vw;
}
.modal-text:last-of-type {
padding-bottom: 2vw;
}
.modal-item {
display: flex;
justify-content: space-between;
margin: 5vw auto 0;
}
.modal-item img {
height: 100%;
max-height: 100vh;
object-fit: cover;
width: 100%;
}
.top-borderless {
margin-top: 0;
}
.portfolio-thin {
width: 25vw;
}
.portfolio-half {
margin-top: 5vw;
width: 35vw;
}
.portfolio-wide {
width: 45vw;
}
.long-item {
grid-column: span 12;
height: auto;
}
@keyframes modalFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes modalFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}<html lang="en">
<body>
<!--Portfolio-->
<span class="anchor" id="Portfolio"></span>
<section class="portfolio">
<h1 class="section-title" id="Portfolio-title">WORK</h1>
<div class="portfolio-items three-quarter">
<!---- Portfolio Item 1 ----->
<div class="portfolio-item">
<img class="portfolio-thumb" src="assets/images/JustJulezBoxNCards.png" alt="Just Julez logo design">
<div class="image-title">
<a href="#" class="portfolio-link">
<h2 class="portfolio-title">Just Julez </h2>
<p class="portfolio-description"> Logo Design </p>
<p class="continue-button">Click to see more</p>
</a>
</div>
<!--- Portfolio Modal 1 ---->
<div class="portfolio-modal">
<!--- Close Modal --->
<button class="modal-close">
<svg viewBox="0 0 33.71 33.7">
<defs></defs>
<g data-name="Layer 2">
<g data-name="Layer 1">
<path class="cls-1" d="M19.69,16.85,33.12,3.41A2,2,0,0,0,30.29.59L16.85,14,3.41.59A2,2,0,0,0,.59.59a2,2,0,0,0,0,2.82L14,16.85.59,30.28a2,2,0,0,0,0,2.83,2,2,0,0,0,2.82,0L16.85,19.67,30.29,33.11a2,2,0,0,0,1.42.59,2,2,0,0,0,1.41-3.42Z" />
</g>
</g>
</svg>
</button>
<div class="modal-header">
<div class="modal-title-box">
<h2 class="modal-item-title"> Just Julez </h2>
<p class="modal-subtitle"> Logo Design </p>
</div>
</div>
<div class="modal-content">
<div class="modal-row">
<img class="modal-item three-quarter" src="assets/images/JustJulezBoxNCards.png" alt="Logo for Just Julez Jewelery Company displayed on box and buisiness card">
</div>
<div class="modal-row modal-text-row">
<p class="modal-item three-quarter modal-text">A local jewelry company was looking for a sassy, feminine logo with a handwritten typeface that would evoke a sense of royalty. The client was heavily inspired by Queen Bees and wanted an illustrated Queen Bee holding a jeweled crown as the focal point of the logo. I presented logos as such, while explaining the importance of keeping the mark simple and bold. We were able to condense the logo to its most important components creating a mark that met the mark.</p>
</div>
<div class="modal-row gray-space">
<div class="modal-item three-quarter">
<div class="portfolio-thin">
<img src="assets/images/JustJulezCardsMontage-01.png" alt="Montage of buisiness cards for Just Julez Jewelery Company" />
</div>
<div class="portfolio-wide">
<img src="assets/images/JustJulezCard.png" alt="Front of buisiness card for Just Julez Jewelery Company" />
</div>
</div>
</div>
</div>
</div>
</div>
<!---- Portfolio Item 2 ---->
<div class="portfolio-item">
<img class="portfolio-thumb" src="assets/images/SpeakUpLogoOnly.png" alt="Speakup Speakout Identity and promotional materials">
<div class="image-title">
<a href="#" class="portfolio-link">
<h2 class="portfolio-title">Speak Up Speak Out </h2>
<p class="portfolio-description"> Logo and Promotional Materials </p>
<p class="continue-button">Click to see more</p>
</a>
</div>
<!--- Portfolio Modal 2 ---->
<div class="portfolio-modal">
<!--- Close Modal --->
<button class="modal-close">
<svg viewBox="0 0 33.71 33.7">
<defs></defs>
<g data-name="Layer 2">
<g data-name="Layer 1">
<path class="cls-1" d="M19.69,16.85,33.12,3.41A2,2,0,0,0,30.29.59L16.85,14,3.41.59A2,2,0,0,0,.59.59a2,2,0,0,0,0,2.82L14,16.85.59,30.28a2,2,0,0,0,0,2.83,2,2,0,0,0,2.82,0L16.85,19.67,30.29,33.11a2,2,0,0,0,1.42.59,2,2,0,0,0,1.41-3.42Z" />
</g>
</g>
</svg>
</button>
<div class="modal-header header1">
<div class="modal-title-box">
<h2 class="modal-item-title"> Speak Up Speak Out </h2>
<p class="modal-subtitle"> Logo and Promotional Materials </p>
</div>
</div>
<div class="modal-content">
<div class="modal-row">
<img class="modal-item three-quarter" src="assets/images/SpeakUpMockupsInplace.png" alt="Logo for Just Julez Jewelery Company displayed on box and buisiness card">
</div>
<div class="modal-row modal-text-row">
<p class="modal-item three-quarter modal-text"> I designed a promotional package for a lecture series, including a poster, a flyer, and a table tent. The goal was to develop a system that could be used amongst multiple topics through the series with minimal effort each week. I first designed the logo and then developed the rest of the system pulling influence from the speech bubble that contains the logo, to create a design that highlights all of the important information in a manner that allows for it to flow and maintain legibility.</p>
</div>
<div class="modal-row gray-space">
<div class="modal-item three-quarter">
<div class="portfolio-thin">
<img src="assets/images/SpeakUpMockupsInplace.png" alt="Logo for Speak Up Speak out speech series" />
</div>
<div class="portfolio-wide">
<img src="assets/images/SpeakUpMontage.png" alt="Montage of logo, flyer, and poster for speak up speak out speech series" />
</div>
</div>
</div>
</div>
</div>
</div>
【问题讨论】：
标签： javascript html css mobile