pre{ background-color: #eee; padding: 10px; border: 1px solid #ddd; } p{ font-size: 18px; line-heigh
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>
以上代码演示了弹出框的基本实现,点击“提交”按钮后会弹出一个确认框,点击确认后会提交表单并隐藏弹出框,点击取消则隐藏弹出框。
粉丝
0
关注
0
收藏
0