3,389
个编辑
小
// Edit via Wikiplus
Salt lovely（留言 | 贡献） 小 （// Edit via Wikiplus） |
Salt lovely（留言 | 贡献） 小 （// Edit via Wikiplus） |
||
| 第63行： | 第63行： | ||
let yesBtn = document.createElement('div') | let yesBtn = document.createElement('div') | ||
yesBtn.className = 'btn' | yesBtn.className = 'btn' | ||
yesBtn.style.setProperty('--hover-color', '# | yesBtn.style.setProperty('--hover-color', '#FDF6E6') | ||
yesBtn.textContent = '确定' | yesBtn.textContent = '确定' | ||
yesBtn.addEventListener('click', () => { | yesBtn.addEventListener('click', () => { | ||
| 第76行： | 第76行： | ||
let noBtn = document.createElement('div') | let noBtn = document.createElement('div') | ||
noBtn.className = 'btn' | noBtn.className = 'btn' | ||
noBtn.style.setProperty('--hover-color', '# | noBtn.style.setProperty('--hover-color', '#FDF6E6') | ||
noBtn.textContent = '取消' | noBtn.textContent = '取消' | ||
noBtn.addEventListener('click', () => { | noBtn.addEventListener('click', () => { | ||
| 第86行： | 第86行： | ||
}) | }) | ||
container.appendChild(noBtn) | container.appendChild(noBtn) | ||
// 关闭按钮 | |||
let closeBtn = document.createElement('div') | |||
closeBtn.className = 'close' | |||
closeBtn.textContent = '×' | |||
closeBtn.addEventListener('click', () => { | |||
if (safe) { | |||
safe = false | |||
selfRemove() | |||
} | |||
}) | |||
container.appendChild(closeBtn) | |||
// 显示UI | // 显示UI | ||
container.style.opacity = '0' | container.style.opacity = '0' | ||
container.style.top = '- | container.style.top = '20%' | ||
container.style.transitionTimingFunction = 'ease-out' | |||
document.body.appendChild(container) | document.body.appendChild(container) | ||
// 调整位置 | // 调整位置 | ||
container.style.marginLeft = (container.offsetWidth * -0.5) + 'px' | container.style.marginLeft = (container.offsetWidth * -0.5) + 'px' | ||
container.style.marginTop = (container.offsetHeight * -0.5) + 'px' | container.style.marginTop = (container.offsetHeight * -0.5) + 'px' | ||
container.style.transitionDuration = '.3s' | |||
container.style.opacity = '1' | container.style.opacity = '1' | ||
container.style.top = '50%' | container.style.top = '50%' | ||
setTimeout(() => { container.style.transitionTimingFunction = 'ease-in' }, 500) | |||
/**移除自己 */ | /**移除自己 */ | ||
function selfRemove() { | function selfRemove() { | ||
container.style.top = ' | container.style.top = '20%' | ||
container.style.opacity = '1' | container.style.opacity = '1' | ||
setTimeout(() => { container.remove() }, 500) | setTimeout(() => { container.remove() }, 500) | ||
| 第116行： | 第128行： | ||
left: 50%; | left: 50%; | ||
min-width: 20vw; | min-width: 20vw; | ||
background: # | background: #fbf2dc; | ||
user-select: none; | user-select: none; | ||
} | } | ||
.confirmUIcontainer > center{ | .confirmUIcontainer > center{ | ||
| 第139行： | 第150行： | ||
.confirmUIcontainer .btn:hover{ | .confirmUIcontainer .btn:hover{ | ||
background-color: var(--hover-color,transparent); | background-color: var(--hover-color,transparent); | ||
} | |||
.confirmUIcontainer .close{ | |||
position: absolute; | |||
width: 2rem; | |||
height: 2rem; | |||
top: 0; | |||
right: 0; | |||
font-size: 2rem; | |||
line-height: 2rem; | |||
text-align: center; | |||
} | } | ||
` | ` | ||
document.head.appendChild(s) | document.head.appendChild(s) | ||
}) | }) | ||