基于JS+HTML實(shí)現(xiàn)彈窗提示是否確認(rèn)提交功能

更新時(shí)間：2020年06月17日 11:50:21 作者：在斑馬線上散布

這篇文章主要介紹了基于JS+HTML實(shí)現(xiàn)彈窗提示是否確認(rèn)提交功能,需要的朋友可以參考下

需求：當(dāng)點(diǎn)擊input按鈕時(shí)候，彈出確認(rèn)框，確認(rèn)后提交到指定url，效果如下

分析：這里面要，引入三個(gè)庫(kù)文件，如下是下載地址

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

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

　　jquery代碼庫(kù)：http://www.jq22.com/

代碼：下載后放入響應(yīng)的項(xiàng)目目錄，最后代碼如下

<!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>
<!-- 引入的庫(kù)文件 -->
<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 // 是否顯示關(guān)閉按鈕
      , title : '未來(lái)社區(qū)提示！！' //標(biāo)題
      , anim: 1 //動(dòng)畫(huà)類型
      , btn: ['確定', '取消'] //按鈕
            , yes: function() {　　　　　　　　　 //這里也可以寫(xiě)響應(yīng)的ajax請(qǐng)求
                window.location.href=url
            }   
   , btn2: function () {
     layer.msg('取消')  
    }
        })
    }
</script>
</body>
</html>

ps:請(qǐng)求的是同級(jí)目錄下的t.php文件，最終打印輸出，當(dāng)然yes:方法里面，也可以下響應(yīng)的ajax請(qǐng)求。

js實(shí)現(xiàn)刪除文章彈窗提示是否確認(rèn)

模板代碼

<a href="__URL__/dele/id/{$vo.id} " rel="external nofollow" onclick="javascript:return p_del()" >刪除</a>

js代碼

function p_del() {
 var msg = "您真的確定要?jiǎng)h除嗎？";
 if (confirm(msg)==true){
  return true;
 }else{
  return false;
 }
}

總結(jié)

到此這篇關(guān)于基于JS+HTML實(shí)現(xiàn)彈窗提示是否確認(rèn)提交功能的文章就介紹到這了,更多相關(guān)js 實(shí)現(xiàn)彈窗提示是否確認(rèn)提交內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: