JS加HTML实现弹窗提示是否确认提交

需求:当点击input按钮时候,弹出确认框,确认后提交到指定url,效果如下

分析:这里面要,引入三个库文件,如下是下载地址

  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请求。

(0)

相关推荐

  • LayUI【基本使用】

    需要的数据 { "code": 0, "msg": "", "count": 1000, "data" ...

  • PHP file_put_contents()写入配置文件

    php把提交的数据写入到配置文件中 在后台可以设置网站的基本信息,例如:title,keywords,copyright.等信息,这些信息只是一条数据,存入数据库耗费资源,直接写入到php文件中. 创 ...

  • Layui 开发使用文档

    开始使用 - 入门指南 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在 ...

  • layui初识

    layui 是什么? 是一个ui库 UI设计(或称界面设计)是指对软件的人机交互.操作逻辑.界面美观的整体设计.UI设计分为实体UI和虚拟UI,互联网常用的UI设计是虚拟UI,UI即User Inte ...

  • HTML5 postMessage 跨域跨窗口传递消息

    父页面代码: <!DOCTYPE html> <html> <head> <title>选择位置demo</title> <metac ...

  • Excel VBA工作薄 6.1 设置个性化弹窗 提示更加醒目、温馨

    前景提要 经过了大半个月的学习,我们算是成功的完结了工作薄的相关知识的分享和说明,到此第5系列告一段落了,之后将会分享一些工作表的一些操作方法,但是最近几天身体有点不舒服,还没有构思好,暂时先和大家说 ...

  • 使用easyadmin require.js 加载地方js的问题

    今天在使用easyadmin在后台想实现一个加载预览pdf的问题,需要引入第三方的pdfobject.js 把路径写入文件的时候,刷新网页看到报错,我想肯定哪里冲突的问题.他使用的require.js ...

  • 易资讯| 三星新款折叠屏机型售价曝光,一加Nord 2屏幕配置已确认……

    三星新款折叠屏机型售价曝光 随着此前已经有传言曝光了三星旗下新款折叠屏机型Galaxy Z Fold 3与Galaxy Z Flip 3的相关信息后,或将在8月11日亮相的这两款新机也吸引了外界的众多 ...

  • 易资讯​|一加7T系列国内发布会时间确认,realme X2 Pro将于10月15日亮相……

    一加7T系列国内发布会时间确认 一加方面继9月26日在印度及美国召开新品发布会,率先推出下半年新机中的一加7T之后,因此对于一加7 Pro的后续产品一加7T Pro无疑也受到了外界的更多关注.而在今天 ...

  • 解决layui弹窗提示刷新页面一闪而逝的问题

    今天有群友提出这样一个问题: ajax请求成功后,然后弹窗提示用户,接着刷新页面.结果弹窗一闪而逝,页面就刷新了,提示的信息用户都来不及看到. 这样的问题我之前也用到过,我的解决方法如下: 重点代码如 ...

  • jQuery加PHP实现图片上传并提交

    图片上传思路:通过ajax实现图片上传,然后把PHP返回的图片地址,加入到隐藏字段中,最后通过表单提交给后台PHP,代码如下 HTML代码 zimg.html文件: <!DOCTYPE html ...

  • 必备技能!Photoshop提示无法加载

    我们在安装Photoshop后加载时,经常会遇到以下弹窗提示,其实解决方法很简单,也不需要更换PS版本,只需在注册表编辑器中添加一个字符串即可: Windows解决方法如下: "Win+R& ...

  • [UWP]在应用退出时弹出确认提示框

    [UWP]在应用退出时弹出确认提示框

  • [js] 第89天 js异步加载有哪些方案?

    今日试题: js异步加载有哪些方案? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前端面试每日3+1 ...