当前位置: 首页 > 编程笔记 >

基于JS+HTML实现弹窗提示是否确认提交功能

林英朗
2023-03-14
本文向大家介绍基于JS+HTML实现弹窗提示是否确认提交功能,包括了基于JS+HTML实现弹窗提示是否确认提交功能的使用技巧和注意事项,需要的朋友参考一下

需求:当点击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 // 是否显示关闭按钮
      , 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 实现弹窗提示是否确认提交内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片),包括了基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)的使用技巧和注意事项,需要的朋友参考一下 我的风格,先给大家展示下效果图,具体效果图如下所示,如果大家感觉还不错很满意请参考实现代码。 HTML的代码: JS代码: 后台一般处理程序的代码: 上传图片的一般处理程序: 提交表单

  • 本文向大家介绍基于JS实现密码框(password)中显示文字提示功能代码,包括了基于JS实现密码框(password)中显示文字提示功能代码的使用技巧和注意事项,需要的朋友参考一下 其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就是放两个文本框,

  • 本文向大家介绍基于javascript实现的搜索时自动提示功能,包括了基于javascript实现的搜索时自动提示功能的使用技巧和注意事项,需要的朋友参考一下 当在数据量不是很大,而且没有后端对应的功能接口的时候,一些简单的搜索功能基本上是前端去实现的,正好最近用到,写了一个,贴出来和大家分享: 效果图: 功能描述: 按下键盘后及时搜索条目中的汉字,汉字对应的拼音和号码; 实现思路: 先将条目中的

  • 本文向大家介绍jQuery基于Ajax方式提交表单功能示例,包括了jQuery基于Ajax方式提交表单功能示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery基于Ajax方式提交表单功能。分享给大家供大家参考,具体如下: 提交表单一般通过同步的方式提交,提交后页面刷新或跳转到新页面来显示服务器端返回的处理结果。如果表单提交后有另外的操作或业务需求需要还在这个页面上显示或处理,那

  • 本文向大家介绍js实现关闭网页出现是否离开提示,包括了js实现关闭网页出现是否离开提示的使用技巧和注意事项,需要的朋友参考一下 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统、信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失。这里面的实现过程很简单,利用了HTML DOM事件中的onunload和onbeforeunl

  • 本文向大家介绍C# winForm实现的气泡提示窗口功能示例,包括了C# winForm实现的气泡提示窗口功能示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了C# winForm实现的气泡提示窗口功能。分享给大家供大家参考,具体如下: 更多关于C#相关内容感兴趣的读者可查看本站专题:《C#窗体操作技巧汇总》、《WinForm控件用法总结》、《C#数据结构与算法教程》、《C#常见控件用法