基于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 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
jQuery的学习步骤
Feb 23 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
动态加载jquery库的方法
Feb 12 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
react项目从新建到部署的实现示例
Feb 19 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+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
小程序实现tab标签页
2020/11/16 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
Python实现多属性排序的方法
2018/12/05 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
逃课检讨书怎么写
2015/01/01 职场文书
坎儿井导游词
2015/02/09 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python