基于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 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
js重写方法的简单实现
Jul 10 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
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/11/14 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
简单实现php上传文件功能
2017/09/21 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
从python读取sql的实例方法
2020/07/21 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
给老师的检讨书
2014/02/11 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
教书育人演讲稿
2014/09/11 职场文书
艺术节开幕词
2015/01/28 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
python解析json数据
2022/04/29 Python