优化复制提示为居中弹窗并增加蒙层
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -210,21 +210,30 @@ function copyPrompt() {
|
||||
});
|
||||
}
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
if (!t) {
|
||||
t = document.createElement('div');
|
||||
t.id = 'toast';
|
||||
t.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;padding:10px 24px;border-radius:8px;font-size:0.88rem;z-index:999;transition:opacity .3s,transform .3s;opacity:0;pointer-events:none;';
|
||||
document.body.appendChild(t);
|
||||
var m = document.getElementById('toastMask');
|
||||
if (!m) {
|
||||
m = document.createElement('div');
|
||||
m.id = 'toastMask';
|
||||
m.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:999;display:flex;align-items:center;justify-content:center;transition:opacity .25s;opacity:0;';
|
||||
m.onclick = function() { hideToast(); };
|
||||
var b = document.createElement('div');
|
||||
b.id = 'toastBox';
|
||||
b.style.cssText = 'background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:32px 40px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.18);';
|
||||
m.appendChild(b);
|
||||
document.body.appendChild(m);
|
||||
}
|
||||
t.textContent = msg;
|
||||
t.style.opacity = '1';
|
||||
t.style.transform = 'translateX(-50%) translateY(0)';
|
||||
clearTimeout(t._tid);
|
||||
t._tid = setTimeout(function() {
|
||||
t.style.opacity = '0';
|
||||
t.style.transform = 'translateX(-50%) translateY(-10px)';
|
||||
}, 1500);
|
||||
var box = document.getElementById('toastBox');
|
||||
box.innerHTML = '<div style="font-size:2rem;margin-bottom:12px;">✅</div><p style="font-size:1rem;font-weight:600;color:var(--fg);">' + msg + '</p>';
|
||||
m.style.display = 'flex';
|
||||
requestAnimationFrame(function() { m.style.opacity = '1'; });
|
||||
clearTimeout(m._tid);
|
||||
m._tid = setTimeout(hideToast, 1800);
|
||||
}
|
||||
function hideToast() {
|
||||
var m = document.getElementById('toastMask');
|
||||
if (!m) return;
|
||||
m.style.opacity = '0';
|
||||
setTimeout(function() { m.style.display = 'none'; }, 250);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user