layui 常用确认框、提示框 demo
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="/css/layui.css">
</head>
<script type="text/javascript" src="layui/layui.all.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- * 从官网下载的layui包中解压后内容如下
* ├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件 * 这里要十分注意的是，我们测试的代码中引入layui的js要引入 layui.all.js，否则某些功能会无效--> <body>
<!-- 你的HTML代码 -->
<div>
aa
</div>
<button id="start" data-method="setTop" class="layui-btn">显示弹出层</button> <script> $(function(){ //打开弹窗
$("#start").on("click",function(){
f5();
});
}); //单个确认按钮（常用）
function f7(){
layer.alert("aa");
} //确认、取消按钮（常用）
function f6(){
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
//do something
alert("aa")
layer.close(index);
});
} //自动消失提示（常用）
function f7(){
layer.msg("aa");
} //单个按钮
function f5(){
layer.open({
content: 'test'
,btn: ['按钮一'] });
} //下面仅供参考 //多个确认按钮
function f2(){
layer.confirm('纳尼？', {
btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
,
btn3: function(index, layero) {
//按钮【按钮三】的回调
}
}, function(index, layero) {
//按钮【按钮一】的回调
}, function(index) {
//按钮【按钮二】的回调
}); } //多个确认按钮
function f3(){
layer.open({
content: 'test'
,btn: ['按钮一', '按钮二', '按钮三']
,yes: function(index, layero){
//按钮【按钮一】的回调
alert(1);
layer.close(index);
}
,btn2: function(index, layero){
//按钮【按钮二】的回调
alert(2);
//return false 开启该代码可禁止点击该按钮关闭
}
,btn3: function(index, layero){
//按钮【按钮三】的回调
alert(3);
//return false 开启该代码可禁止点击该按钮关闭
}
,cancel: function(){
//右上角关闭回调 //return false 开启该代码可禁止点击该按钮关闭
}
});
} //多个确认按钮
function f4(){
layer.open({
content: 'test'
,btn: ['确定', '取消']
,yes: function(index, layero){
//确定的回调
alert(1);
layer.close(index);
return 1;
}
,btn2: function(index, layero){
//取消的回调
alert(2);
return 2;
//return false 开启该代码可禁止点击该按钮关闭
} ,cancel: function(){
//右上角关闭回调
// return false //开启该代码可禁止点击该按钮关闭
}
});
} </script> </html>
layui 常用确认框、提示框 demo的更多相关文章
- JavaScript 消息框,警告框,确认框,提示框
1.警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: alert("文本") 2.确认框 确认框用于使用户可以验证或 ...
- bootstrap弹出框提示框无法调用
使用bootstrap的js插件真的很好用啊有木有!! 但是第一次使用这个弹出框跟提示框的时候就被打击了,没有反应啊!! 然而这并不是一个大问题,一句话搞定,看代码: //首先是工具提示: $(fun ...
- Unity编辑器-创建单独编辑框,折叠框,提示框
今天我们就来学习如何创建一个编辑框,上面绘制一个折叠框里面有四种消息框. 代码如下: using UnityEngine; using System.Collections; using UnityE ...
- JavaScript 中创建三种消息框：警告框、确认框、提示框。
网址:http://www.w3school.com.cn/js/js_popup.asp 警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语 ...
- JS组件系列——Bootstrap寒冬暖身篇：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- Bootstrap：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- Bootstrap篇：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...
- 强大的响应式jQuery消息通知框和信息提示框插件
lobibox是一款功能很强大的jQuery消息通知框和信息提示框插件.这个插件分为两个部分:消息通知框和信息提示框.它能很好的结合Bootstrap使用. 信息提示框 lobibox的信息提示框能够 ...
随机推荐
- linux 网卡相关命令
1. ifconfig //查看网络相关信息 2. ifconfig eth0 192.168.1.103 netmask 255.255.255.0 //配置eth0的IP地址 3. route - ...
- Centos 安装 kubectl kubelet kubeadm
cat <<EOF > /etc/yum.repos.d/kubernetes.repo [kubernetes] name=Kubernetes baseurl=https://m ...
- 【SDOI2018】反回文串（【ARC064 F】Rotated Palindromes 加强版）
题意 给你一个正整数 \(n\),求有多少字符集为 \(1\) 到 \(k\) 之间整数的字符串,使得该字符串可以由一个长度为 \(n\) 的回文串循环移位得到. ARC原题 \(100\%\) 的数 ...
- 测试工具jmeter
测试工具jmeter http:压力测试 https://www.cnblogs.com/stulzq/p/8971531.html
- 使用Mutex實現單一程式執行個體的注意事項（转）
相信大家都知道在.NET程式中若要實現單一程式執行個體,一般來說有幾種方法,像是去判斷是否已經有開啟的Process是相同的程式.用Mutex與Semaphore之類的技術來判斷是否程式正在開啟.但是 ...
- HNOI2004 树的计数 和 HNOI2008 明明的烦恼
树的计数 输入文件第一行是一个正整数n,表示树有n个结点.第二行有n个数,第i个数表示di,即树的第i个结点的度数.其中1<=n<=150,输入数据保证满足条件的树不超过10^17个. 明 ...
- c++关于字符串的读入和截取
#include<iostream>#include<string>#include<vector>using namespace std;vector<st ...
- 燕化迷你ACDP程序FEM / BDC
带有BMW FEM / BDC模块的Mini ACDP可通过ICP或OBP模式支持FEM / BDC IMMO键编程.与传统的接线方式相比,它们有什么区别? 方法1:通过其他设备通过焊接进行FEM / ...
- psd缩略图上传控件
前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践. ...
- 20190716NOIP模拟赛T1 礼物（概率dp+状压）
题目描述 夏川的生日就要到了.作为夏川形式上的男朋友,季堂打算给夏川买一些生 日礼物. 商店里一共有种礼物.夏川每得到一种礼物,就会获得相应喜悦值Wi(每种 礼物的喜悦值不能重复获得). 每次,店员会 ...