ipad 弹出页面弹出层时背景可滚动问题

简单实现弹出弹框页面背景半透明灰，弹框内容可滚动原页面内容不可滚动的效果(JQuery)

弹出弹框效果展示实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.box,因为要在整个窗口显示固定,所以position要设为fixed,background设为灰色半透明,由于要遮住整个显示屏,width和height都设为100%(body和html的width和height也都设为100%); 在遮罩层的div.box里写弹框的div.container,位置相对于父级

在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题

最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹出,但是这时貌似就会和父页面发生冲突,我的解决方法就是,让这个弹出层在父页面弹出,即使用parent.layer.alert().parent.layer.oper()

弹出层layer演示以及在编写弹出层时遇到的错误

实现的功能: 首先第一步在官方下载layer的文件.layUI官网:http://layer.layui.com/ http://layer.layui.com/ layer文件的下载步骤如下: 然后将完整的layer文件复制在你当前的项目.如下: 引入jquery.js和layer.js,注意:jQuery.js必须在layer.js前面而且jquery.js必须是1.8版本或者以上的 <script type="text/javascript" src="

移动端 H5 弹出层 fixed 内容可滚动

<div class="alert_wapper"> <div class="wapper">  </div> </div> <style> .alert_wapper{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0

JQuery弹出层，实现弹层切换，可显示可隐藏。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="

JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="

div+js 弹出层

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background

JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="

jQuery弹出层效果

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery弹出层效果</title><style>.black_overlay{di

jQuery点击弹出层，弹出模态框，点击模态框消失

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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>

ios11，弹出层内的input框光标错位键盘弹出时，输入信息，光标一直乱跳

之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textarea输入框,ios11系统的苹果机用户在点击输入框,出现键盘后,弹出层被顶上去,而光标还停留在原处,即出现错位情况. 解决思路: 解决光标错位:弹出层设置为position: absolute:body添加position: fixed; 弹出层重新定位:获取滚动条高度,设置为弹出层Top值: fun

弹出层-layui

type 0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) 弹出层 //winIndex存储弹出层的index,以便关闭弹出层时使用 function openWindow(document){ winIndex = layer.open({ id:"add" //唯一标识 ,type: 1 //弹出层类型 http://www.layui.com/doc/modules/layer.html ,title:'' //标题默认 ‘信息’ ,area: [

js的事件冒泡和点击其他区域隐藏弹出层

一.前言在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: 弹出层的界面需要统一,不一致的弹出层并不能增加美感,相反还会显得页面布局更加杂乱无章: 弹出层的设计一定要好看,按钮要符合项目的主色调: 弹出层的宽度固定屏幕占比,设置max-width,高度根据内容自适应: 点击其他区域隐藏弹出层... 二.正文今天,主要说说点击其他区域隐藏弹出层.笔者被这个

JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题

HTML <div class="layer"> <div class="menu-list"> <span>社会</span> <span>历史</span> <span>军事</span> <span>娱乐</span> <span>电影</span> <span>财经</span> <sp

Ipad弹出UIAlertControllerStyleActionSheet时发生崩溃

pad弹出UIAlertControllerStyleActionSheet时,在iphone上运行正常,但在ipad上崩溃,解决代码如下: UIAlertController *alertVc = [UIAlertController alertControllerWithTitle:@"请选择图片" message:@"" preferredStyle:UIAlertControllerStyleActionSheet]; if (isiPad) {//判断是否

JS弹出层遮罩,隐藏背景页面滚动条细节优化

做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容. 一.去除滚动条方法给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度

简单 JS 弹出层背景变暗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"&g

bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $('#myModal').on('shown', function() { $(document).off('focusin.modal'); }); 这个是国内同学的解决方法: http://www.oschina.net/question/226830_143869 //显示modal $('#m

分享一个JQuery弹出层插件

JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:(2010-08-12):修正IE6下不能遮住下拉菜单的BUG,增加拖动时半透明效果. 应用演示弹出文本信息提示: 我是下拉菜单 tipsWindown("提示","text:提示信息内容","250","150","

JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效果. 1.1.优点不需要插件支持优秀的用户体验提高Web程序的性能减轻服务器和带宽的负担 1.2.缺点浏览器对XMLHttpRequest对象的支持度不足,几乎所有浏览器现在都支持破坏浏览器“前进”.“后退”按钮的正常功能,可以通过简单的插件弥补对搜索引擎的支持不足 1.3.jQuer

JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效果. 1.1.优点不需要插件支持优秀的用户体验提高Web程序的性能减轻服务器和带宽的负担 1.2.缺点浏览器对XMLHttpRequest对象的支持度不足,几乎所有浏览器现在都支持破坏浏览器“前进”.“后退”按钮的正常功能,可以通过简单的插件弥补对搜索引擎的支持不足 1.3.jQuer

ipad 弹出页面弹出层时背景可滚动问题

热门专题