火狐浏览器高度&制作简单万年历&弹出层

浏览器高度: FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度万年历: <!DOCTYPE html> <html> <head&g…

js制作带有遮罩弹出层实现登录小窗口

要实现的效果如下点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并且遮罩层笼罩整个页面,使整个页面的其他元素暂时失去行为. 遮罩层的实现:相对于body绝对定位,宽度和高度都和body相同,并且有一定的透明度,使得下面的元素能够被看到.原先的元素的z-index为0,遮罩层的z-index在弹出登录小窗口和原先元素的之间. 说的不是很清楚,还是看代码吧! <!DO…

Web前端设计模式--制作漂亮的弹出层

设计场景: Ben最近在负责一个购书网站,在网站的首页上,有一个叫做“最新上架”的板块,板块的内容比较简单,只有书籍名称,作者姓名和上架时间(如图),当初设计的时候并i没有过于丰富的构思... 现在问题来了,这个版块不大,更新频率却很高,每天都有十数条最新的信息上去,浏览网站的会员对于最新图书的了解和需求越来越大,因此需要对这个板块进行改良,以满足会员的需求,会员的主要要求有以下几个方面:显示该最新上架的图书的封面缩略图,该图书的名称和作者名称,以及该书部分内容的介绍和作者的简介... 这下把B…

简单 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…

layUI 几个简单的弹出层

导入控件主题 <link rel="stylesheet" href="dist/themes/default/style.min.css" /> 创建容器也就是包含jsTree控件的元素,一般使用<div>就可以了. <div id="jstree_demo_div"></div> 引入jQuery jsTree依赖于jQuery,所以需要引入jQuery: <script src=&qu…

一个简单的弹出层ProgressBar

https://github.com/eltld/SimpleLoading…

jQuery制作信息提示弹出层插件【推荐】

给大家分享一款非常实用的弹窗提示窗口插件,包含多种模式.带有回执函数值的功能.1. [代码][JavaScript]代码 <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><!--[if IE 6]><script type="text/javascript" src="js/iepngfix_tilebg…

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

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

layer弹出层框架alert与msg详解

ayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer. 经常用到的在贴出代码 layer.alert('见到你真的很高兴', {icon: 6}); 这是一个最简单的弹出层,可根据icon配置左边的图标通常…

DIV+CSS制作二级横向弹出菜单，略简单

没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯DIV+CSS制作二级横向弹出菜单</title> <style type="text/css"> .menu{ font-family:arial,sans-serif; /*widt…

jquery制作弹出层带遮罩效果，点击阴影部分层消失

jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">jquery点我弹出</a> <div id="myModal" class="reveal-modal"&g…

layer —— 一个简单的jQuery弹出层插件

layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问题:采用红色字 4,19日更新问题在老版本中(1.7)版中遇到的问题;问题补充:准确的说是,在移动端中所出现的问题, layer.confirm() //在运行时会报错,是什么原因呢? 原因:在移动端中,其实是不支持,layer.alert(),layer.confirm(),layer.…

【bug】安卓浏览器键盘输入改变弹出层的定位

bug描述在安卓浏览器中,有一个在页面底部的弹出层表单,样式如下: .popup { position: absolute; bottom: 0; } 当在这个弹出层输入内容,键盘自动弹出,弹出层的bottom值会改变成键盘的高度,有可能使输入框超出屏幕的高度. bug解决给弹出层添加一个高度 .popup { position: absolute; bottom: 0; max-height: 80%; }…

LODOP内嵌挡住浏览器的div弹出层

首先,做一个简单的div弹出层用于测试,该弹出层的介绍可查看本博客另一篇博文:[JS新手教程]浏览器弹出div层然后加入LODOP内嵌,LODOP可以内嵌,C-LODOP不能内嵌,可以在IE等浏览器下查看内嵌效果.如图,在这个做的简单弹出层的代码基础上,加了LODOP内嵌和一个文本框,当文本框的内容为空的时候,显示弹出层,不为空的时候显示打印设计内嵌. 被遮挡的原代码: <head> <meta http-equiv="Content-Type" content=&…

js简单弹出层、遮罩层

<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 { -webkit-box-shadow: 3px 3px 3px; -moz-box-shadow: 3px 3px 3px; box-shadow: 3px 3px 3px; } .box-shadow-2 { -webkit-box-shadow: 0 0 10px #0CC; -moz-box-sha…

jquery 简单弹出层(转)

预定义html代码:没有所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* width height is defined by javascript */ position: absolute; top:0; left: 0; z-index: 1000; background-color: #000; opacity: 0.2; *filter:alpha(opacity=2…

点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ width: 140px; height: 105px; margin-top: 10px; margin-right: 8px; margin-left: 10px; cursor: pointer; ; box-shadow: 0px 0px 2px 2px #DBDBDB; transition:…

【Javascript Demo】遮罩层和百度地图弹出层简单实现

其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!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/x…

【Javascript Demo】谷歌地图简单实现（附遮罩层和弹出层实现）

虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用js链接,照着敲就行了. 下面是我写的示例和代码,仅供参考,点击查看地图,会弹出大的谷歌地图显示: 地址:4035 NORTH NELLIS BOULEVARD,LAS VEGAS 查看地图地图源代码下载:谷歌地图简单实现(附遮罩层和弹出层实现).zip…

【Javascript Demo】遮罩层和弹出层简单实现

最近纠结于遮罩层和弹出层的实现,终于搞定了个简单的版本.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!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/xht…

代码录播：jQueryMobile 实现一个简单的弹出框效果

今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果,有兴趣的童鞋可以试试哦~ ^_^ 阅读原文:www.gbtags.com …

使用JavaScript实现弹出层效果的简单实例

转自:https://www.jb51.net/article/85475.htm 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 ? 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 <!DOCTYPE html> <html> <head> <title>Windo…

JavaScript 实现简单的弹出框关闭框

JavaScript 实现简单的弹出框关闭框知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素代码献上: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="…

js进阶 11-20 弹出层如何制作

js进阶 11-20 弹出层如何制作一.总结一句话总结:其实就是一个div,控制显示和隐藏即可.设置成绝对定位更好,就可以控制弹出层出现的位置.关闭的画质需要将display重新设置为none就好. 二.弹出层弹出层案例描述:点击按钮之后自动弹出一个内容页面,点击内容页面上的关闭按钮后,页面关闭 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"…

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

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

easyDialog 简单、实用的弹出层组件

easyDialog 简单.实用的弹出层组件使用背景在完成导师需求时,导师要求寻找比一个layer弹出层组件体积小得多的.最好能嵌入在进HTML代码中而非src引用的弹出层组件,在这个需求下,我找到了本文的主角 easyDialog组件简介相比于layer其js+css+img组合下69KB的大小,该组件普通版仅6.6KB大小,压缩的min版本则仅2KB大小,且能够直接将代码从js文件复制至HTML的script代码块中该组件v1.0版本发布于2011-03-23,发布于当时作者的个人…

DIV JS CSS 轻量级弹出层兼容各浏览器

<!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"><head><meta http-equiv="Content-Typ…

jquery 简单弹出层

预定义html代码:没有所有代码通过js生成和移除. 预定义css .z-popup-overlay{ width:100%; min-height: 100%; height:800px; position: absolute; top:; left:; z-index:; background-color: #000; opacity: 0.5; filter:alpha(opacity=50); } .z-popup{ position: fixed; top:200px; _posit…

简单实用的JQuery弹出层

效果: 初始状态时滚动条是可以滚动的弹出层出现之后:1.弹窗始终居于整个窗口的中间 2.滚动条不可滚动实现代码: HTML代码: <div class="container"> <input type="button" value="点击" class="btn1"> <div class="overlay"></div> <div class=&q…

使用movable-view制作可拖拽的微信小程序弹出层效果。

仿了潮汐睡眠小程序的代码.[如果有侵权联系删除最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照了一下. 首先善用度娘反编译弄到了源码,但是打不开.然后自己研究源码发现他们用的是movable-view实现的. 于是仿照着搭出了基础框架. 新建了个组件 wxml  <movable-area style…

【火狐浏览器高度&制作简单万年历&弹出层】的更多相关文章