JS加HTML實現彈窗提示是否確認提交

時間 2020-06-21

標籤 html 實現提示是否確認提交欄目 JavaScript 简体版

原文原文鏈接

需求：當點擊input按鈕時候，彈出確認框，確認後提交到指定url，效果以下php

分析：這裏面要，引入三個庫文件，以下是下載地址html

　　layui樣式文件：https://layer.layui.com/jquery

　　layer彈窗組件：https://www.layui.com/ajax

　　jquery代碼庫：http://www.jq22.com/動畫

代碼：下載後放入響應的項目目錄，最後代碼以下ui

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<!-- 你的HTML代碼 -->
<form>
    <input type="button" value="提交" onclick="buyAffirm('t.php?id=25')">
</form>
<!-- 引入的庫文件 -->
<script src="../layui/layui.all.js"></script>
<script src="../layer/layer.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
    console.log(1)
    function buyAffirm(url) {
        layer.alert('肯定提交嗎？', {
        skin: 'layui-layer-molv' //樣式類名 自定義樣式
      , closeBtn: 1 // 是否顯示關閉按鈕
      , title : '將來社區提示！！' //標題
      , anim: 1 //動畫類型
      , btn: ['肯定', '取消'] //按鈕
            , yes: function() {
　　　　　　　　　 //這裏也能夠寫響應的ajax請求
                window.location.href=url
            }            
            , btn2: function () {
                    layer.msg('取消')     
                }
        })
    }
</script>
</body>
</html>

ps:請求的是同級目錄下的t.php文件，最終打印輸出，固然yes:方法裏面，也能夠下響應的ajax請求。url

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。