给EMLOG发布文章页面添加一个悬浮的“立即发布”按钮

给EMLOG发布文章页面添加一个悬浮的“立即发布”按钮！

时常在长篇文章结束后，需要滚动鼠标到上方才能点击立即发布。而修改一段代码就能给页面添加一个悬浮的“立即发布”按钮，舒服指数飙升！

修改文件路径为：../admin/views/article_write.php

代码：

<input type="submit" name="pubPost" id="pubPost" value="立即发布" onclick="return checkform();" class="btn btn-success btn-sm"/>

替换代码如下：

<!-- 原按钮保持不变 -->
<input 
    type="submit" 
    name="pubPost" 
    id="pubPost" 
    value="立即发布" 
    onclick="return checkform();" 
    class="btn btn-success btn-sm" 
/>

<!-- 新增的悬浮按钮 -->
<div id="floatingSubmitBtn" class="floating-submit-btn">
    <input 
        type="submit" 
        name="pubPostFloat" 
        value="立即发布" 
        onclick="return checkform();" 
        class="btn btn-success btn-sm" 
    />
</div>

<style>
/* 悬浮按钮样式 */
.floating-submit-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform: translateY(-20px);
}

.floating-submit-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 美化悬浮按钮 */
.floating-submit-btn .btn {
    padding: 8px 20px;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-radius: 4px;
    background: linear-gradient(to right, #28a745, #218838);
    border: none;
    transition: all 0.2s;
}

.floating-submit-btn .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.floating-submit-btn .btn:active {
    transform: translateY(0);
}
</style>

<script>
// 滚动显示/隐藏悬浮按钮
window.addEventListener('scroll', function() {
    const floatingBtn = document.getElementById('floatingSubmitBtn');
    if (window.scrollY > 200) { // 滚动超过200px显示
        floatingBtn.classList.add('show');
    } else {
        floatingBtn.classList.remove('show');
    }
});

// 确保表单提交时两个按钮不会冲突
document.querySelector('#floatingSubmitBtn input').addEventListener('click', function(e) {
    // 触发原按钮的检查函数
    if(typeof checkform === 'function' && !checkform()) {
        e.preventDefault();
    }
});
</script>

×

如果觉得文章对您有用，请随意打赏。
您的支持是我们继续创作的动力！

微信扫一扫

支付宝扫一扫