基于JS+HTML實現(xiàn)彈窗提示是否確認提交功能
更新時間：2020年06月17日 11:50:21 作者：在斑馬線上散布
這篇文章主要介紹了基于JS+HTML實現(xiàn)彈窗提示是否確認提交功能,需要的朋友可以參考下
需求：當點擊input按鈕時候，彈出確認框，確認后提交到指定url，效果如下
分析：這里面要，引入三個庫文件，如下是下載地址
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)
function buyAffirm(url) {
layer.alert('確定提交嗎？', {
skin: 'layui-layer-molv' //樣式類名 自定義樣式
, closeBtn: 1 // 是否顯示關(guān)閉按鈕
, title : '未來社區(qū)提示??！' //標題
, anim: 1 //動畫類型
, btn: ['確定', '取消'] //按鈕
, yes: function() { //這里也可以寫響應的ajax請求
window.location.href=url
}
, btn2: function () {
layer.msg('取消')
}
})
}
</script>
</body>
</html>
ps:請求的是同級目錄下的t.php文件，最終打印輸出，當然yes:方法里面，也可以下響應的ajax請求。
js實現(xiàn)刪除文章彈窗提示是否確認
模板代碼
<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;
}
}
總結(jié)
到此這篇關(guān)于基于JS+HTML實現(xiàn)彈窗提示是否確認提交功能的文章就介紹到這了,更多相關(guān)js 實現(xiàn)彈窗提示是否確認提交內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
用ajax實現(xiàn)的自動投票的代碼...2007-03-03
原生JavaScript和Vue實現(xiàn)從百度地圖抓取經(jīng)緯度
在前端開發(fā)中,使用百度地圖 API 來獲取用戶的經(jīng)緯度是一種常見需求,本文提供了使用原生 JavaScript 和 Vue.js 實現(xiàn)從百度地圖抓取經(jīng)緯度的詳細示例,需要的可以了解下2024-11-11
這篇文章主要給大家介紹了關(guān)于JavaScript中arguments的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
JavaScript 中的 new、bind、call、apply 實際這些都離不開 this，因此本文將著重討論 this，在此過程中分別講解其他相關(guān)知識點。2020-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)商品放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
javascript 文本框水印/占位符(watermark/placeholder)實現(xiàn)方法
html5為表單元素(type為text/password/search/url/telephone/email)新增了一個placeholder屬性，為輸入框提供一種提示2012-01-01
JavaScript具有一個非常有用的方法replace()，可以用它利用備選字符集途歡指定的字符，下面有個不錯的示例，大家可以嘗試操作下2013-10-10
這篇文章主要介紹了js讀取配置文件的方法,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細介紹了js鋼琴按鈕波浪式圖片排列效果，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
JavaScript控制瀏覽器全屏及各種瀏覽器全屏模式的方法、屬性和事件
這篇文章主要介紹了JavaScript控制瀏覽器全屏及各種瀏覽器全屏模式的方法、屬性和事件的相關(guān)資料,需要的朋友可以參考下2015-12-12