layer插件layer弹出图片层函数怎样向后台传送处理数据

来源：蜘蛛抓取(WebSpider) 时间：2017-10-13 07:24 标签： layer弹出层传递参数
layer插件open方法回掉值问题
时间： 09:56:26
&&&& 阅读：870
&&&& 评论：
&&&& 收藏：0
标签：最近做项目需用到一个弹出层加载iframe页面的东西，首先想到layer插件,此插件用到过多次，兼容性很好，功能也强大，废话不多说上代码。
其实功能很简单，就是在目标页面选择一个值，回掉回来，说明一下主要的代码。
$("#ChoiceBank").click(function () {
var width = $("#content").css("Width");
layer.open({
title: ‘开户银行选择‘,
area: [width, ‘380px‘],
content: [‘/Bank.aspx‘, ‘no‘],
btn: [‘确定‘, ‘取消‘],
yes: function (index, layero) {
var body = layer.getChildFrame(‘body‘, index);
//此处我理解的是加载目标页面的内容
$("#当前页面需要设置的元素").val(body.find(‘#h_bankName‘).val());　　//查到目标页面的内容赋给当前页面元素
layer.close(index);//这块是点击确定关闭这个弹出层
此弹出窗口触发条件有多个分别为
success&- 层弹出后的成功回调方法
yes&- 确定按钮回调方法
cancel&- 取消和关闭按钮触发的回调
end&- 层销毁后触发的回调
需要说的就这么多不清楚的，可留言，或者去官方论坛发帖。标签：
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！打赏支持，微信扫一扫。加群交流。
已有51人支持~~~
&div class="col-xs-4 text-left" style="padding-left: 50"&&button type="button" class="btn btn-success" onclick="addCategory();"&添加&/button&&/div&
点击添加，按钮，执行添加方法
function addCategory() {
layer.open({
title:'&img src="{sh::RES}image/add.gif"&&添加分类',
area: ['700px', '530px'],
fix: false, //不固定
maxmin: true,
content: '{sh::U("Mall/editcategory")}',
success:function(layero,index){
end:function(){
var handle_status = $("#handle_status").val();
if ( handle_status == '1' ) {
layer.msg('添加成功！',{
time: 2000 //2秒关闭（如果不配置，默认是3秒）
},function(){
history.go(0);
} else if ( handle_status == '2' ) {
layer.msg('添加失败！',{
time: 2000 //2秒关闭（如果不配置，默认是3秒）
},function(){
history.go(0);
这个方法，打开一个iframe页面，页面中可以执行一些操作，添加分类，执行完毕后调用一个end方法。这个方法，很有用！
不管执行结果如果，都会调用。
iframe可以传递参数到父页面。
end方法，根据传递的结果，执行一些后续操作。
&div class="content"&
&form action="" method="post" id="myform" enctype="multipart/form-data"&
&div class="form-group row"&
&div class="left col-xs-3 text-right"&
&label for=""&名称:&/label&
&div class="right col-xs-8 text-left"&
&input type="text" class="form-control" id="name" name="name" placeholder=""&
&div class="form-group row"&
&div class="left col-xs-3 text-right"&
&label for=""&类别:&/label&
&div class="right col-xs-8 text-left"&
&input type="text" class="form-control" id="name" name="name" placeholder=""&
&div class="form-group row"&
&div class="left col-xs-3 text-right"&
&label for=""&图标:&/label&
&div class="right col-xs-8 text-left"&
&input type="file" id="logo" name="logo"&
&div class="form-group row"&
&div class="left col-xs-3 text-right"&
&label for=""&启用:&/label&
&div class="right col-xs-8 text-left"&
&input name="status" type="checkbox" checked="checked"& 启用
&div class="form-group text-center submit"&
&button type="submit" class="btn btn-primary "&提交&/button&
表单提交，提交到后台（表单提交，刷新iframe层页面）
&script type="text/javascript"&
var index = parent.layer.getFrameIndex(window.name);
var success = '{sh:$success}';
if ( success == '1' ) {
parent.$("#handle_status").val('1');
parent.layer.close(index);
} else if( success == '2' ) {
parent.$("#handle_status").val('2');
parent.layer.close(index);
收到执行的结果，success，成功是1，失败是2。执行相应的操作。也就是，
传值+关闭iframe层。
父层有一个隐藏的元素，专门用来接收传值的
&input id="handle_status" value="" hidden="hidden"&
流程很清晰。
layer很牛逼！
提交后，提示成功与失败，并且刷新页面。一气呵成。
阅读(...) 评论()
有1000W以后，工作只是不让自己闲着，而不是全靠工作去生存。JQuery $.layer弹出层使用-爱编程
JQuery $.layer弹出层使用
官方地址：&
引入jquery包
引入$.layer插件包demo
1.引入相应相应的js
&!--&弹出层插件&--&
&link&type="text/css"&href="${basePath}js/layer/skin/layer.css"&rel="stylesheet"&/&
&script&src="${basePath}js/layer/layer.min.js"&&/script&
2.js代码（为class/id属性绑定的点击事件）
//为某个class绑定的点击事件
$('.stuClockframe').on('click',&function()&{
title:&['测试弹框',&'background:#159'],
maxmin&:&true,//是否开启最大/最小化
border:&[7,&0.43,&'#1570b6'],
shadeClose&:&true,&//开启点击遮罩关闭层
area&:&[&'750px',&'500px'&],//设置弹框的高度和宽度，也可用百分比
offset&:&[&'10%',&''&],
iframe&:&{
src&:&'${basePath}controll/method.do'&//访问的连接地址，也可是静态页面
2.js函数弹框
function&show(studentId,uniqueid){
title:&['弹框标题',&'background:#159'],
maxmin&:&false,
border:&[7,&0.43,&'#1570b6'],
shadeClose&:&true,&
area&:&[&'400px',&'250px'&],
offset&:&[&'10%',&''&],
iframe&:&{
其中src地址可以是action访问/超链接/静态页面地址
就是将访问的页面嵌入进这个弹出层的iframe中
3.关闭弹出层事件
parent.layer.close(parent.layer.getFrameIndex(window.name));
4.调用父窗口属性和值
//拿到父窗口的值
parent.$("#send").val("");
//调用父页面的函数
parent.ref();
更多示例参考官方demo
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。

我要回帖

更多关于 layer弹出层传递参数 的文章

 

随机推荐