pre{ background-color: #eee; padding: 10px; border: 1px solid #ddd; } p{ font-size: 18px; line-height: 1.5; margin-bottom: 20px; } button{ padding: 10px; font-size: 18px; background-color: #3498db; color: #fff; border: none; cursor: pointer; } #modal{ display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 999; } #modal div{ background-color: #fff; border-radius: 5px; padding: 20px; width: 400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #modal h3{ font-size: 24px; margin-top: 0; } #modal p{ margin-top: 10px; font-size: 18px; } #modal button{ margin-top: 20px; }

CSS中的提交弹出提醒框

CSS中的弹出框可以提高用户体验，为了不让用户在提交表单时无意中点击错误，可以添加一个提示框让用户确认。

 <button id="submit-btn">提交</button>
 
    <div id="modal">
        <div>
            <h3>确认提交</h3>
            <p>确定提交吗？</p>
            <button id="confirm-btn">确定</button>
            <button id="cancel-btn">取消</button>
        </div>
    </div>
    
    <script>
    var submitBtn = document.getElementById('submit-btn');
    var modal = document.getElementById('modal');
    var confirmBtn = document.getElementById('confirm-btn');
    var cancelBtn = document.getElementById('cancel-btn');
 
    submitBtn.onclick = function(){
        modal.style.display = 'block';
    };
 
    confirmBtn.onclick = function(){
        // 在这里添加表单提交的代码
        modal.style.display = 'none';
    };
    
    cancelBtn.onclick = function(){
        modal.style.display = 'none';
    };
    </script> 

以上代码演示了弹出框的基本实现，点击“提交”按钮后会弹出一个确认框，点击确认后会提交表单并隐藏弹出框，点击取消则隐藏弹出框。