基于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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
vscode中使用npm安装babel的方法
Aug 02 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
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
菜单效果
2006/10/14 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
jquery中radio checked问题
2015/03/16 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
Python中splitlines()方法的使用简介
2015/05/20 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
Python操作MySQL数据库的方法
2018/06/20 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
如何执行一个shell程序
2012/11/23 面试题
简历的自我评价
2014/02/03 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL