关于layer.photos图片点击无法弹出的问题分析。

layer是一款口碑很好的弹层组件,详细的介绍可以参看官网介绍,网址是http://layer.layui.com/。本期在博主进行测试的过程中,发现需要顺利返回JSON并通过前端进行获取并显示照片需要注意以下内容:

1、如果测试可以将json打印出来,需要注意的是,json中的所有斜杠必须都是向右斜的,如果是本机测试的话,要注意的是获得的图片资源的路径格式必须为相对路径,也就是说路径钱不能像那些以c:盘符号开头的形式;如果对于打印出的json无法自己判断是否正确的话,可以通过下面的这个网站来进行json校对,官网是:http://www.bejson.com/。如果校验后不报错可以基本判断输出的json格式是正确的。

2、注意在打印json的时候,如果是双引号套双引号,像这样 " "" " ;这样的话必须进行转义,写成:“ \” \“ ”。最后记得return xxx.toString();给大家一个楼主自己找的网页,上面有完整的代码,网址是:http://www.cnblogs.com/xiadongqing/p/5252579.html

3、要使用layer的照片图层可以将下载的组件放到WEB-INF目录下,在引用的时候,需要使用绝对路径进行引用,例:<script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.min.js"></script>,还需引入:extend/layer.ext.js,extend/layer.ext.js的引用也可以使用:layer.use('extend/layer.ext.js');来进行。使用$.getJSON("url",value,callback)。jQuery语法适用于layer。如图:

4、如果返回的JSON正确,可以使用alert("例子");来进行排错。

最后楼主在测试的时候发现自己使用的360极速浏览器在极速模式下点击后图片无法弹出,切换到兼容模式和IE9模式都是可以的,谷歌浏览器也可以正常弹出,各项功能指标正常!

时间: 2024-07-29 00:02:03

关于layer.photos图片点击无法弹出的问题分析。的相关文章

jquery原创弹出层折叠效果点击折叠弹出一个层

 今天整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息,感兴趣的朋友可以学习下 弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可.    html:   代码如下: <h1 class="bm"><a href="javascript:;">我要报名</a></h1> 

jQuery插件zoom实现图片全屏放大弹出层特效_jquery

1.介绍 jQuery制作zoom图片全屏放大弹出层插件. 2.使用方法 1.引入以下的js和css文件 <link rel="stylesheet" href="css/zoom.css" media="all" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/zoom.min.js&quo

jquery原创弹出层折叠效果点击折叠弹出一个层_jquery

弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可. html: 复制代码 代码如下: <h1 class="bm"><a href="javascript:;">我要报名</a></h1> 复制代码 代码如下: *{ margin:0; padding:0;} body{ font:1

遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)_jquery

首先给大家展示演示效果: 基于JavaScript的网页弹出层,鼠标按在弹出层的标题栏处,可以拖动该浮动层随意移动位置,不需要时也可以关闭,操作体验舒服,兼容性好,IE/火狐等众多浏览器下运行稳定.反应快速.代码表现方面,简洁务实,不玩虚的,拿去学习也相当不错. js代码 示例一: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>弹出层并可

利用javaScript实现点击输入框弹出窗体选择信息

 这篇文章主要是对利用javaScript实现点击输入框弹出窗体选择信息进的实例行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 在这里奉上源代码,没有做样式处理,不过功能是可以的,希望大家可以和我交流交流!   代码如下: <html>  <head>   <title>点击弹出DIV选择信息</title>      <meta http-equiv="keywords" content="keyword1

javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

  本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法.分享给大家供大家参考.具体分析如下: 这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

  本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

在Firefox下js select标签点击无法弹出

在Firefox下js select标签点击无法弹出,在IE和CHROME下没有此现象 在项目中运用到了JQUERY UI,用到了其中的disableSelection()方法,这个方法是让页面上的指定元素无法通过鼠标拖拽进行选择. 由于某些需求,我在给div使用了此方法后,达到了上述效果,但是有不足的地方. 在Firefox下运用此方法后,div中的select方法点击之后将会无法弹出,在IE和CHROME下没有此现象.  

js-aspnet实现类似winform的功能,点击按钮弹出窗口,原窗口重新绑定显示查询结果

问题描述 aspnet实现类似winform的功能,点击按钮弹出窗口,原窗口重新绑定显示查询结果 想通过aspnet实现一个功能,原页面有个按钮我通过showmodaldialog弹出一个窗口,窗口里面是一个表单,我希望表单的数据传递到原页面,原页面再根据这些参数,重新绑定gridview,得出查询结果,我的原页面gridview上面还有按钮,必须放在_!ispostback_里面,所以页面用session或者get方式获得参数的话,databind必须放在_ispostback_条件里面,因为