1. 程式人生 > 程式設計 >基於JS+HTML實現彈窗提示是否確認提交功能

基於JS+HTML實現彈窗提示是否確認提交功能

需求:當點選input按鈕時候,彈出確認框,確認後提交到指定url,效果如下

基於JS+HTML實現彈窗提示是否確認提交功能

分析:這裡面要,引入三個庫檔案,如下是下載地址

  layui樣式檔案:https://layer.layui.com/

  layer彈窗元件:https://www.layui.com/

  jquery程式碼庫:http://www.jq22.com/

程式碼:下載後放入響應的專案目錄,最後程式碼如下

<!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)
functionbuyAffirm(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請求。

js實現刪除文章彈窗提示是否確認

模板程式碼

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

js程式碼

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

總結

到此這篇關於基於JS+HTML實現彈窗提示是否確認提交功能的文章就介紹到這了,更多相關js 實現彈窗提示是否確認提交內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!