基于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操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
YUI模块开发原理详解
Nov 18 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 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/02/22 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
JS回调函数深入理解
2019/10/16 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
python读取LMDB中图像的方法
2018/07/02 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Django 框架模型操作入门教程
2019/11/05 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
小区门卫值班制度
2014/01/24 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
国富论读书笔记
2015/06/26 职场文书
暑期家教宣传单
2015/07/14 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
Redis如何实现分布式锁
2021/08/23 Redis