jquery Layer(弹窗/tips/confirm)插件使用教程

1、首先引用:

<script src="../../js/common/layer/layer.js"></script>

2、消息提示tips:

layer.tips('请先填写本次出库的总量,再点击右侧的详细设置按钮选择批次。', '#outcount');

3、弹窗就全屏

 代码如下 复制代码

var index = layer.open({
                    type: 2,
                    content: 'list.html?op=select&outcount=' + outcount,
                    area: ['300px', '195px'], title: false,
                    maxmin: true, closeBtn: 0
                });
layer.full(index);

4、消息确认对话框

 代码如下 复制代码

function CloseShowMsg() {
            if (isok == false) {
                //信息框-例2
                layer.msg('耗材还没有分配完成,确认关闭吗?', {
                    time: 0 //不自动关闭
                  , btn: ['确认关闭', '继续修改']
                  , yes: function (index) {
                      layer.close(index);
                  }
                });
            }
}

5、在iframe打开和关闭,以及传值

打开

 代码如下 复制代码
var index = layer.open({
                    type: 2,
                    content: 'list.html?op=select&outcount=' + outcount,
                    area: ['300px', '195px'], title: false,
                    maxmin: true, closeBtn: 0
                });
                layer.full(index);

关闭传值

 代码如下 复制代码

parent.$('#parentIframe').text('我被改变了');
             var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                      parent.layer.close(index); //再执行关闭

时间: 2024-09-16 06:55:20

jquery Layer(弹窗/tips/confirm)插件使用教程的相关文章

小巧强大的jquery layer弹窗弹层插件_jquery

先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js 触发弹层的事件可自由绑定,如:  $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码:  [信息框]:  layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两种风格

webjx收集45个jQuery导航插件和教程

45个jQuery 导航插件及教程.新用户访问一个网站的最初15-20妙会对他们对网站的喜好影响很大,促使他们决定去留.所以开发一个直观易用,风格恰当的导航帮助用户开始是非常重要的.这篇文章列出的这些教程不仅体现了jQuery的强大,也展示了导航创意设计的众多可能. Horizontal Menu Navigation Plugins and Tutorials Mega Drop Down Menu w/ CSS & jQuery DemoAccording to usability expe

27个新鲜惊奇的jQuery插件与教程

51CTO推荐专题:jQuery给力插件大阅兵 教程 1. How to add preloader with loading image in a gallery using jQuery 在图像画廊载入过程中使用 jQuery 预加载技术.演示 教程 2. Simple Lava Lamp Menu Tutorial With jQuery 创建一个独特的熔岩灯动画效果的 jQuery 导航菜单.演示 教程 3. How To Create a 3D Tag Cloud in jQuery

13个超级有用的 jQuery 内容滚动插件和教程

这篇文章与大家分享13个超级有用的 jQuery 内容滚动插件和教程.您可能经常能看到一些网站上特色区域的内容以滚动方式变化,这是一种在有限的网页空间内展示更多内容的良好方式,而且能吸引用户注意 力.如果你一直想知道这是如何实现的,那么这里的13个 jQuery 内容滚动插件教程将帮助您实现这种效果. jQuery Tools Scrollable AnythingSlider jQuery Plugin Sliding Boxes and Captions with jQuery Making

分享10个jQuery实现的超酷动态特效教程和插件

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 使 用jQuery可以帮助你快速的实现一些非常酷的动态特效,有些时候能帮助你提高用户体验,8630.html">有时候能够帮助你似的网站更加炫酷.例如在GBin1首页使用 的标题宽度变化效,可以有效的帮助用户提高阅读的便利性,一个好的前端人员,应该时时刻刻站在用户的角度看待UI设计. 今天这里我们收集了10个使用特别动态效果的

分享精心挑选的12款优秀 jQuery Ajax 分页插件和教程

在这篇文章中,我为大家收集了20个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能.我们一起来看看下面这些优秀的分页插件.   1.Client-side jQuery pagination plugin : jPages jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等.

推荐40款强大的 jQuery 导航插件和教程(上篇)_jquery

在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程.导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多的内容.在下面的集合中,你会发现很多便利的 jQuery 导航插件和有用的教程,帮助你实现充满吸引力的网站导航,让你网站更有组织性和交互性. A Stylish Navigation Menu With jQuery ( 演示 | 下载 )   Making a Fresh Content Acco

推荐40个简单的 jQuery 导航插件和教程(下篇)_jquery

在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程.导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多的内容.在下面的集合中,你会发现很多便利的 jQuery 导航插件和有用的教程,帮助你实现充满吸引力的网站导航,让你网站更有组织性和交互性. Creating CSS3 Dropdown Menu ( 演示 | 下载 )   Creating a CSS3 Dropdown Menu ( 演示 | 

精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程_jquery

当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换.借助流行的 jQuery 框架,只需很少的代码就可以实现精美的手风琴效果,帮助你的网站吸引更多用户的眼球.   Elegant Accordion with jQuery and CSS3 首先推荐的这款插件是基于 jQuery 和 CSS3 实现的优雅的鼠标悬停手风琴效果. 制作教程 在线演示   Vertical Sliding Acc