基于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 相关文章推荐
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 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
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
PHPMailer发送邮件
2016/12/28 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
财务总监岗位职责
2014/03/07 职场文书
《老山界》教学反思
2014/04/08 职场文书
就业协议书范本
2014/10/08 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书