页面弹窗效果layui里的插件layer

现在官网下js，解压layui的目录放在项目中

http://layer.layui.com/

这里有所有的属性以及方法：

https://www.layui.com/doc/modules/layer.html

在content中写form表单后可以在YES事件中，用document.getElementById('form_id').submit

但这种方法不知道怎么返回前端，默认会自动刷新页面

所有我用了ajax方法

 layer.open({type:0,title:['账号绑定手机号', 'font-size:15px;'],content:'
<form action="<%=basePath%>login/mobile-bind-input.do" id="mobile-bind-input" method="post">' +
'<label>用户名</label><input type="text" id="userId" name="userId" data-rule="required"><br/>'+
'<label>手机号</label><input type="text" id="mobile" name="mobile" data-rule="required">'+
'</from>',yes: function(index, layero){var userId=document.getElementById("userId").value;var mobile=document.getElementById("mobile").value;//do something
//                   document.getElementById('mobile-bind-input').submit();$.ajax({url: '<%=basePath%>login/mobile-bind-input.do',data: {userId: userId,mobile: mobile},type: 'post',cache: false,dataType: 'json',success: function (json) {layer.close(index); //如果设定了yes回调，需进行手工关闭if(json.status==300){layer.msg('无该用户名');}else {layer.msg('已成功绑定，请再次发送验证码');}}});}})

页面弹窗效果layui里的插件layer相关推荐

Axure RP9 页面弹窗效果
1.元件库拖动一个表格,表格中输入内容,如下图: 2. 创建一个动态面板,使用矩形框将内容搭建好,如下图: 3.添加两个按钮,并改名为取消.确定,右上方添加一个关闭的符号,然后退出,将动态面板命名为对 ...
layui tree ajax刷新,layer 刷新某个页面的实现方法
layer 刷新某个页面的实现方法一:使用layer.open打开的子页面 window.parent.location.reload()//刷新父页面 var index = parent.lay ...
给页面字段中添加一个按钮，点击按钮实现弹窗效果
页面效果: 点击按钮后弹窗效果: 点击左上角搜索框效果: 页面实现代码首先配置一个入住房间字段 <field><header>入住房间</header><d ...
网页弹窗插件layer.js的使用
一.下载相关文件 http://layer.layui.com/ 将所有文件放入项目目录下,包括extend和skin文件夹二.引入js文件 <script src="js/laye ...
Dorado7 notify非alert 输入框prompt confirm layer dialoger，layer.msg，toast效果，几秒关闭layer.load layer.open
IDEA-layer 方式一:layer.alert() layer.alert("当前行的下标:" + row.username, {icon: 0}); icon=0 1 2 ...
弹出框插件layer使用
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...
前端|利用模态框（Modal）实现弹窗效果
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 一.弹窗的运用弹 ...
layui使用tips_使用layer.tips实现鼠标悬浮时触发事件提示消息实现
代码: 你瞅啥!?过来试试! 方法一: function show(id) { layer.tips("左边么么哒", "#"+id+"", ...
html怎么插动态图片不显示不出来,layer插件layer.photos()动态插入的图片无法正常显示...
layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常有朋友遇到同样的问题 http://fly.layui.com/ji ...

页面弹窗效果layui里的插件layer

页面弹窗效果layui里的插件layer相关推荐

最新文章

热门文章