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


Posted in Javascript onJune 17, 2020

需求:当点击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)
    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 实现弹窗提示是否确认提交内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 编程引入命名空间的方法与代码
Aug 13 Javascript
用JavaScript隐藏控件的方法
Sep 21 Javascript
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
vue移动端的左右滑动事件详解
Jun 17 #Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 #Javascript
vue-iview动态新增和删除的方法
Jun 17 #Javascript
vue iview实现动态新增和删除
Jun 17 #Javascript
vue如何搭建多页面多系统应用
Jun 17 #Javascript
vue2.0实现列表数据增加和删除
Jun 17 #Javascript
使用next.js开发网址缩短服务的方法
Jun 17 #Javascript
You might like
微信公众平台接口开发入门示例
2014/12/24 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
如何用Python合并lmdb文件
2018/07/02 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
python中bytes和str类型的区别
2019/10/21 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
个人自我评价和职业目标
2014/01/24 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
入党自荐书范文
2015/03/05 职场文书
python3操作redis实现List列表实例
2021/08/04 Python
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL