基于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 01 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
php Session无效分析资料整理
2016/11/29 PHP
php操作access数据库的方法详解
2017/02/22 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
把input初始值不写value的具体实现方法
2013/07/04 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
javascript中this的四种用法
2015/05/11 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
Python性能提升之延迟初始化
2016/12/04 Python
python中单下划线_的常见用法总结
2018/07/10 Python
python+mysql实现教务管理系统
2019/02/20 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
简历中自我评价怎么写
2014/02/12 职场文书
部队党性分析材料
2014/02/16 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
财务人员担保书
2014/05/13 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
小学生手册家长意见
2015/06/03 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
python可视化之颜色映射详解
2021/09/15 Python
Python中的datetime包与time包包和模块详情
2022/02/28 Python
浅谈Redis的事件驱动模型
2022/05/30 Redis