基于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 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 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
linux下安装php的memcached客户端
2014/08/03 PHP
php搜索文件程序分享
2015/10/30 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
python中assert用法实例分析
2015/04/30 Python
Python之os操作方法(详解)
2017/06/15 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Django分组聚合查询实例分享
2020/04/29 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
德购商城:德国进口直邮商城
2017/06/13 全球购物
打架检讨书400字
2014/01/17 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
六一儿童节活动策划方案
2014/01/27 职场文书
大学新生军训感言
2014/02/25 职场文书
环保倡议书格式范文
2014/05/14 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
小学教师岗位职责
2015/04/02 职场文书
科技活动总结范文
2015/05/11 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python