基于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 相关文章推荐
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
localStorage实现便签小程序
Nov 28 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
js闭包和垃圾回收机制示例详解
Mar 01 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执行速度全攻略(下)
2006/10/09 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
微信小程序icon组件使用详解
2018/01/31 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
使用graphics.py实现2048小游戏
2015/03/10 Python
python实现2048小游戏
2015/03/30 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
新闻编辑自荐信
2013/11/03 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
临床医学专业求职信
2014/08/08 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python