模态框(layer)
推荐一个好看的模态框(layer) 地址:http://layer.layui.com/
相应列子及配置 全部来自于官网,可直接访问官网学习了解。
//信息框-例1
- layer.alert('见到你真的很高兴', {icon: 6});
//信息框-例2
- layer.msg('你确定你很帅么?', {
- time: 0 //不自动关闭
- ,btn: ['必须啊', '丑到爆']
- ,yes: function(index){
- layer.close(index);
- layer.msg('雅蠛蝶 O.o', {
- icon: 6
- ,btn: ['嗷','嗷','嗷']
- });
- }
- });
//信息框-例3
- layer.msg('这是最常用的吧');
//信息框-例4
- layer.msg('不开心。。', {icon: 5});
//信息框-例5
- layer.msg('玩命卖萌中', function(){
- //关闭后的操作
- });
//页面层-自定义
- layer.open({
- type: 1,
- title: false,
- closeBtn: 0,
- shadeClose: true,
- skin: 'yourclass',
- content: '自定义HTML内容'
- });
//页面层-佟丽娅
- layer.open({
- type: 1,
- title: false,
- closeBtn: 0,
- area: '516px',
- skin: 'layui-layer-nobg', //没有背景色
- shadeClose: true,
- content: $('#tong')
- });
//iframe层-父子操作
- layer.open({
- type: 2,
- area: ['700px', '450px'],
- fixed: false, //不固定
- maxmin: true,
- content: 'test/iframe.html'
- });
//iframe层-多媒体
- layer.open({
- type: 2,
- title: false,
- area: ['630px', '360px'],
- shade: 0.8,
- closeBtn: 0,
- shadeClose: true,
- content: '//player.youku.com/embed/XMjY3MzgzODg0'
- });
- layer.msg('点击任意处关闭');
//iframe层-禁滚动条
- layer.open({
- type: 2,
- area: ['360px', '500px'],
- skin: 'layui-layer-rim', //加上边框
- content: ['mobile/', 'no']
- });
//加载层-默认风格
- layer.load();
- //此处演示关闭
- setTimeout(function(){
- layer.closeAll('loading');
- }, 2000);
//加载层-风格2
- layer.load(1);
- //此处演示关闭
- setTimeout(function(){
- layer.closeAll('loading');
- }, 2000);
//加载层-风格3
- layer.load(2);
- //此处演示关闭
- setTimeout(function(){
- layer.closeAll('loading');
- }, 2000);
//加载层-风格4
- layer.msg('加载中', {
- icon: 16
- ,shade: 0.01
- });
//打酱油
- layer.msg('尼玛,打个酱油', {icon: 4});
//tips层-上
- layer.tips('上', '#id或者.class', {
- tips: [1, '#0FA6D8'] //还可配置颜色
- });
//tips层-右
- layer.tips('默认就是向右的', '#id或者.class');
//tips层-下
- layer.tips('下', '#id或者.class', {
- tips: 3
- });
//tips层-左
- layer.tips('左边么么哒', '#id或者.class', {
- tips: [4, '#78BA32']
- });
//tips层-不销毁之前的
- layer.tips('不销毁之前的', '#id或者.class', {
- tipsMore: true
- });
//默认prompt
- layer.prompt(function(val, index){
- layer.msg('得到了'+val);
- layer.close(index);
- });
//屏蔽浏览器滚动条
- layer.open({
- content: '浏览器滚动条已锁',
- scrollbar: false
- });
//弹出即全屏
- var index = layer.open({
- type: 2,
- content: 'http://layim.layui.com',
- area: ['320px', '195px'],
- maxmin: true
- });
- layer.full(index);
//正上方
- layer.msg('灵活运用offset', {
- offset: 't',
- anim: 6
- });
模态框(layer)的更多相关文章
- fastadmin模态框(弹出框)
用法: 在html页面新建一个按钮用来触发事件 <a href="javascript:;" class="btn btn-success btn-add &quo ...
- layui实现类似于bootstrap的模态框功能
以前习惯了bootstrap的模态框,突然换了layui,想的用layui实现类似于bootstrap的模态框功能. 用到了layui的layer模块,例如: <!DOCTYPE html> ...
- bootstrap模态框通过传值解决重复提交问题
自己通过模态框确认是否提交的功能时,总是重复提价上次的请求. 原因:重复的原因是jquery通过id绑定了确定按钮的onclick事件,所以每次提交都会增加 一次绑定(没有清除上次的绑定),才造成了重 ...
- js控制Bootstrap 模态框(Modal)插件
js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html
- Bootstrap模态框按钮
1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...
- boostrap 模态框
<div class="modal fade" id="myModal" tabindex="-1" role="dialo ...
- 解决bootstrap模态框内输入框无法获取焦点
bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可
- 使用RequireJs和Bootstrap模态框实现表单提交
下面我将使用requirejs结合模态框实现三五行代码部署表单提交操作. 传统开发思路如下:
- 使用js实现显示系统当前时间并实现倒计时功能并触发模态框(遮罩)功能
常常在我们的网页中需要倒计时来触发一些函数,例如遮罩等,在本项目中,通过使用jquery,bootstrap,实现了显示系统当前时间,并且实现了倒计时的功能,倒计时实现后将会弹出模态框(遮罩层).模态 ...
随机推荐
- 菜鸟nginx源代码剖析 框架篇(一) 从main函数看nginx启动流程
菜鸟nginx源代码剖析 框架篇(一) 从main函数看nginx启动流程 Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.c ...
- android 4.0主线程訪问网络问题
在4.0下面,在主线程中訪问网络,假设请求超过6s的话,就会报ANR,那么这就会带来一个问题,假设网络慢或者请求的数据过大时,界面会卡顿,造成界面灵敏性非常差,因此网络请求一般不能放在主线程中操作,g ...
- R环境中的工作空间(workspace)
工作空间(workspace)就是当前R的工作环境,它储存着全部用户定义的对象(向量.矩阵.函数.数据框.列表) . 在一个R会话结束时,你能够将当前工作空间保存到一个镜像中.并在下次启动R时自己主动 ...
- SmartSchool CC校友录V8(毕业入世版)
SmartSchool CC校友录V8(毕业入世版) 使用说明 CC校友录V8(毕业入世版) 主要面向毕业后在某城市工作的校友,给大家构建一个充分交流的平台,“人脉”积累是本软件的功能特色,为此淡化了 ...
- 【总结】设备树对platform平台设备驱动带来的变化(史上最强分析)【转】
本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/74375086 版权声明:本文为博主原创文章,转载请注明http://blog.c ...
- 【Codeforces 429D】 Tricky Function
[题目链接] http://codeforces.com/problemset/problem/429/D [算法] 令Si = A1 + A2 + ... + Ai(A的前缀和) 则g(i,j) = ...
- [模板]FWT
写起来和fft很像,这里放个板子. 代码: #include<iostream> #include<cstdio> #include<cmath> #include ...
- geronimo
时间限制 1s 空间限制 512MB 3.1 题目描述 "Geronimo∼" 时间还很多,让我们慢慢来. 不如听首开心的歌再看题?-- 算了,直接看题吧. 给定一个整数 n,以及 ...
- sizeof中的表达式不执行
char a = 255; printf("%d\n",a); printf("%d\n",sizeof(++a)); printf( ...
- 9.2NOIP模拟题
9.2 NOIP模拟 题目名称 “与” 小象涂色 行动!行动! 输入文件 and.in elephant.in move.in 输出文件 and.out elephant.in move.in 时间限 ...