基于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 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
js子页面获取父页面数据示例
May 15 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 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 获取一个月第一天与最后一天的代码
2010/05/16 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
jquery中动态效果小结
2010/12/16 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
python中requests和https使用简单示例
2018/01/18 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
详解Python学习之安装pandas
2019/04/16 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
家长通知书教师评语
2014/04/17 职场文书
体育课课后反思
2014/04/24 职场文书
2015年环卫工作总结
2015/04/28 职场文书