在使用layer控件设置弹框时, 谷歌浏览器中能正常弹出, 显示在页面中央位置. 而在火狐浏览器中, 弹框只显示标题, 并且弹框内容不显示.

在火狐浏览器中弹框的效果如下图红色方框中的弹出框所示,

但是, 在火狐浏览器中, 则出现了弹框位置跳出界面, 并且内容不显示的情况:

进入debug界面, 会发现, 无论是修改layer弹出层位置(offset), 还是设置layer弹出层的宽高(area), 都不能完美的解决问题. 而导致弹出内容不显示的根本原因则是弹出框div的上一级div的layui-layer-content高度为0.

通过漫长的修改与尝试, 最终发现是页面中缺少'<!DOCTYPE html>'导致的, 加上该标签后, 所有的问题都解决了. 在html头部加上<!DOCTYPE html>这句话的意思是，告诉浏览器编写页面所用的标记的版本

jquery-layer弹框在火狐浏览器中弹框不显示的问题的更多相关文章

  1. layer弹出层右上角的关闭按钮怎么没有显示

    问题描述:layer弹出层右上角的关闭按钮怎么没有显示,但鼠标移上去又可以点击 解决方式: 这是因为样式中需要一个图标,你的项目中缺少.解决如下:1.下载图标:http://www-x-zi-han- ...

  2. jQuery layer弹出层插件 http://layer.layui.com/直接上官网学

    在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...

  3. layer弹出层不居中解决方案，仅显示遮罩，没有弹窗

    问题:项目中layer询问层的弹窗仅显示遮罩层,并不显示弹窗…… 原因:图片太多将layer弹窗挤出屏幕下方,看不见了…… 解决方案:让layer的弹出层居中显示 一.问题描述 用layer做操作结果 ...

  4. jQuery Layer 弹层组件

    layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...

  5. jQuery uploadify在谷歌和火狐浏览器下无法上传

    原因: 由于jQuery uploadify是借助flash来实现上传的,每一次向后台发送数据流请求时,ie会自动把本地cookie存储捆绑在一起发送给服务器.但firefox.chrome不会这样做 ...

  6. jquery layer弹出层插件

    http://www.51xuediannao.com/js/jquery/jquery_layer/layer.html

  7. 【jQuery学习】写一个简单的弹框页面，火狐浏览器有弹框，但IE8没有弹框的原因？

    我也是刚学习jQuery,就从官网上下载了jQuery的包,版本是3.2.1 代码 如下: <!DOCTYPE html> <html> <head> <me ...

  8. jQuery layer[页面弹出框]

    常见接口如下: 方法名 描述 $.layer({}) 核心接口,参数是一个对象,对象属性参见上述列表.诸如layer.alert()之类的为$.layer()的包装方法. layer.v 获取版本号. ...

  9. jQuery Layer mobile 弹出层

    layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...

随机推荐

  1. [Python]Flask构建网站分析应用

    原文Saturday morning hacks: Building an Analytics App with Flask - 由orangleliu友情翻译 ,主要是通过埋点技术来实现web网页的 ...

  2. Java进阶(十)java tomcat中context配置

    Tomcat中Context的配置 问题: java tomcat中<context> docBase属性是什么意思? 元素的属性: path:指定访问该Web应用的URL入口.  doc ...

  3. 【一天一道LeetCode】#19. Remove Nth Node From End of List

    一天一道LeetCode系列 (一)题目 Given a linked list, remove the nth node from the end of list and return its he ...

  4. 【资源分享】云计算 CRM 等网上搜集资料

    持续更新,作为抛砖引玉,如果您有更好.更新的资源,望大家分享.共同学习.详细信息尽在 华夏编程社区(HackProLabs)-------------------------------------- ...

  5. tomcat会话之持久化会话管理器

    前面提到的标准会话管理器已经提供了基础的会话管理功能,但在持久化方面做得还是不够,或者说在某些情景下无法满足要求,例如把会话以文件或数据库形式存储到存储介质中,这些都是标准会话管理器无法做到的,于是另 ...

  6. LeetCode（68）-Compare Version Numbers

    题目: Compare two version numbers version1 and version2. If version1 > version2 return 1, if versio ...

  7. LeetCode之旅（15）-Odd Even Linked List

    题目描述: Given a singly linked list, group all odd nodes together followed by the even nodes. Please no ...

  8. 安装centOS后要解决的问题

    1,检查是否联网 ping www.baidu.com 未显示: 则表示网络未连接 首先关闭防火墙 sudo systemctl stop firewalld.service #停止firewall ...

  9. Oracle 10g DG 数据文件迁移

    背景:某客户Oracle 10g 的DG由于空间不足,之前将部分数据文件迁移到其他目录,如今原目录扩容成功,要将之前迁移的数据文件再次迁移回来. 环境:Oracle 10.2.0.5 DG 单机 首先 ...

  10. python笔记--2--字符串、正则表达式

    字符串 ASCII码采用1个字节来对字符进行编码,最多只能表示256个符号. UTF-8以3个字节表示中文 GB2312是我国制定的中文编码,使用1个字节表示英语,2个字节表示中文:GBK是GB231 ...