layui的确认弹出层的玩法

项目中用的windows的confirm确认框感觉很low 改了一下
遇到两个问题
使用layui前：

function outExcel(url) {if (confirm("导出前请确认相关信息！你确定导出吗？")) {var projectUrl =window.document.location.pathname;var projectName = projectUrl.substr(0,projectUrl.substr(1).indexOf('/')+1);var oldAction=$("#searchForm").attr("action");$("#searchForm").attr("action",projectName+url);$("#searchForm").submit();$("#searchForm").attr("action",oldAction);}
}

正确的使用layui后：

function outExcel(url) {layer.confirm('导出前请确认相关信息！你确定导出吗？', {btn: ['确定','取消'] //按钮}, function(index){layer.close();var projectUrl =window.document.location.pathname;var projectName = projectUrl.substr(0,projectUrl.substr(1).indexOf('/')+1);var oldAction=$("#searchForm").attr("action");$("#searchForm").attr("action",projectName+url);$("#searchForm").submit();$("#searchForm").attr("action",oldAction);layer.close(index);}, function(){});return false;

1.第一个问题：
我用的根据id提交表单然后它不用点确认一闪而过就直接提交了
解决方案：
后边加了个return false;

还有可能就是表单默认提交了我们要阻止表单的默认提交
表单内的 <button>未指定类型时，默认的类型为submit，可以显式的修改为<button type="button">来阻止表单提交
2.第二个问题：
在点确认弹出框后不关闭弹出框
解决方案：
layer.close(index);

参考文献：
http://zhiku8.com/layer-confirm-not-close.html
https://blog.csdn.net/whd526/article/details/78178451

layui的确认弹出层的玩法相关推荐

layui点击弹出层中按钮，关闭弹出层
layui点击弹出层中按钮,关闭弹出层原理:点击自己定义的button时,触发弹出层右上角取消按钮. <button type="button" lay-submit=&q ...
layui两个html传值,Layui(二级页面) 弹出层打开页面|传递参数
一级弹出层:弹出打开页面 layer.open({ type: 2, title: '添加用户', content: '../user/goAdd', area: ['460px', '450px'] ...
layui如何隐藏弹出层关闭的按钮
layui默认弹出层是带有关闭按钮的,但是在某些场景我们不需要layui的关闭按钮,这时只需添加closeBtn :0即可效果图如下: 示例代码如下: layui.use('layer', func ...
layui中实现弹出层的确定与取消操作
实现弹出层的确定与取消操作的两种方式一.利用content中用元素生成的确定与取消按钮 <div id="wrapper"><button type=" ...
layui不能关闭弹出层
var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); 失效解决方法: 将自己定义的var n ...
layui怎样将响应数据展示在页面_layui怎么对弹出层显示数据
layui怎么对弹出层显示数据?下面给大家举个例子:点击查看 function func11() { console.log($.cookie("id")); //iframe窗 ...
layui内置模块（layer弹出层）
前面我们已经对layui前端框架的页面元素进行了简单的学习,但是作为一个可用的程序,仅仅是长的好看,并没有那个什么用:在好看的同时还需要实用和酷炫,实用就需要实现我们方便的和后端进行数据交互,酷炫就是 ...
Layui 弹出层插件
Layui 弹出层插件开发工具与关键技术: Visual Studio 2015 – Layui 作者:廖亚星撰写时间:2019年 6 月4日这段时间在做项目页面的搭建,在页面的操作中,会出现很 ...
adminlte+layui框架搭建3 - layui弹出层
在amdinlte首页引入layui.js 和layui.css后添加代码 <script>layui.use(['layer'], function() {var layer =layu ...

layui的确认弹出层的玩法

layui的确认弹出层的玩法相关推荐

最新文章

热门文章