.settings-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #0f0f0f;
color: white;
cursor: pointer;
display: inline-block;
font-weight: 500;
height: 37px;
width: 68px;
margin-top: -113px;
border-top-left-radius: 4px;
}
.settings-modal {
background: #1f1f1f;
border-radius: 0.5em;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
left: 50%;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 346px;
text-align: left;
height: 468px;
display: flex;
flex-direction: column;
margin-top: -30px;
}
.settings-modal .settings-close {
display: block;
}
.settings-modal .settings-modal-title {
color: #ffffff;
padding: 1.5em 2em;
pointer-events: all;
position: relative;
width: calc(100% - 4.5em);
}
.settings-modal .settings-modal-title h1 {
font-size: 1.25rem;
font-weight: 600;
line-height: normal;
}
.settings-modal .settings-content {
padding: 2em;
pointer-events: all;
}
.settings-overlay {
transition: opacity 0.2s ease-out;
pointer-events: none;
background: rgba(0, 0, 0, 0.8);
position: fixed;
opacity: 0;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
details[open] .settings-overlay {
pointer-events: all;
opacity: 0.5;
}
details summary:focus {
outline: none;
}
details summary::-webkit-details-marker {
display: none;
}
code {
font-family: Monaco, monospace;
line-height: 100%;
background-color: #2d2d2c;
padding: 0.1em 0.4em;
letter-spacing: -0.05em;
word-break: normal;
border-radius: 7px;
color: white;
font-weight: normal;
font-size: 1.75rem;
position: relative;
top: -2px;
}
.settings-close {
background: #000000;
border-radius: 50px;
height: 30px;
position: relative;
width: 30px;
border: 2px solid rgb(255, 255, 255);
cursor: pointer;
}
.line1-1 {
background: #ffffff;
height: 15px;
position: absolute;
transform: translateX(9px) translateY(4px) rotate(45deg);
width: 2px;
margin-top: 4px;
margin-left: 5px;
cursor: pointer;
}
.line2-1 {
background: #ffffff;
height: 15px;
position: absolute;
transform: translateX(9px) translateY(4px) rotate(-45deg);
width: 2px;
margin-top: 4px;
margin-left: 5px;
cursor: pointer;
}
.x-touch1 {
align-items: center;
align-self: center;
cursor: pointer;
display: flex;
height: 50px;
justify-content: center;
margin-left: auto;
width: 50px;
cursor: pointer;
}
<div class="settings-button" style="float: left;">
<i class="icon-cog-outline"></i>
</div>
<div class="settings-overlay">
</summary>
<div class="settings-modal">
<div class="x-touch1" onclick="document.querySelector('.email').classList.remove('expand');event.stopPropagation();">
<div class="settings-close">
<div class="line1-1"></div>
<div class="line2-1"></div>
</div>
</div>
<div class="settings-content">
<div class="min">3</div>
<div class="max">15</div>
<div class="description">seconds</div>
<div class="content">Replay duration</div>
<div>
<span id="rangeValue1" data-min="3" data-max="15">3</span>
<input name="slider1" type="range" min="3" max="15" value="0" class="range blue" onChange="rangeSlide1(this.value)" onmousemove="rangeSlide1(this.value)"></Input>
</div>
</div>
</div>
</details>
Robię grę internetową i chcę by po kliknięciu na div,a pojawił się modal.
Udało mi się tylko w problem jest w tym, że modal pojawia się tylko wtedy gdy kliknie się na fontello a ja chciałbym, żeby się pojawiał po kliknięciu w dowolny obszar div'a.
