非常不错的弹出一个div的js代码
LIGHTBOX EXAMPLE
.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; }
可以根据自己要求修改css样式点击这里打开窗口
This is the lightbox content.
Close
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
javascript 通过封装div方式弹出div窗体
图1(弹出一个div) 图2(弹出多个)构造函数: 复制代码 代码如下: var DivWindow= function(popup/*最外层div id*/,popup_drag/*拖动div id*/,popup_exit/*退出按钮id*/ ,exitButton/*触发服务器端退出按钮id*/,varwidth,varheight,zindex){ this.popup =popup ; this.height =varheight ; //窗口高度,并没用来设置窗口高度宽度,用来定位在
-
如何创建一个JavaScript弹出DIV窗口层的效果
在本教程中,我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果. 创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一.传统的JavaScript弹窗已经不适合目前网站的设计理念了,理由有二:首先,不友好--生硬的弹出对话框且伴随着"哐"的一声对用户体验是个很大的挑战:其次,兼容性不够强--有相当多的浏览器屏蔽了这种JS的Alert()方法.于是,一个良好用户体验的网站需要一种更合理的解决方案--使用很少的HTML代码,很少的
-
js弹出div并显示遮罩层
复制代码 代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var oWins = document.getElementBy
-
js点击弹出div层实现可拖曳的弹窗效果
弹出层.弹窗效果+拖曳功能 *{ margin:0px; padding:0px;} body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;} .botton{ color:#F00; cursor:pointer;} .mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; pad
-
js实现非常棒的弹出div
本文实例为大家分享了一个非常棒的弹出div,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8" /> <title>LIGHTBOX EXAMPLE</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%
-
js实现div弹出层的方法
本文实例讲述了js实现div弹出层的方法.分享给大家供大家参考.具体分析如下: 话说现在各种插件出来了要实现弹出层真是太简单了,但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西,下面来给各位分享一个原生太js div弹出层实例,有需要的朋友可一起看看. 这个不用多说了,直接贴代码吧.有码有注释: 复制代码 代码如下: /* * 弹出DIV层 */ function showDiv() { var Idiv = document.getElementById("Idiv&quo
-
JavaScript写的一个DIV 弹出网页对话框
网上搜索到的代码,做了一些修改该, 修正无法自定义颜色,修正IE8 下错误,以及其他小BUG 兼容IE6~8以及火狐 可以自定义 // 提示窗口标题高度 // 提示窗口的边框颜色 // 提示窗口的标题颜色 // 提示窗口的标题背景色 // 提示内容的背景色 // 提示内容文字对齐方式 功能 可以弹出一个大DIV遮住页面(IE下 透明) 然后在屏幕中央显示显示一个小DIV 可用作功能提示 操作提示 以及公告等 提示内容可以使带HTML标记的文字,也可是一个页面链接 复制代码 代码如下: funct
-
javascript div 弹出可拖动窗口
/* * 创建弹出div窗口. 1.接口说明:DivWindow(id,title,width,height,content) 构造函数,创建一个弹出窗口对象 参数:id 弹出窗口id: title:弹出窗口标题名称: width:弹出窗口宽度 height:弹出窗口高度 content: 弹出窗口显示内容 2.接口说明: closeDivWindow(id) 关闭窗口 参数: id 弹出窗口id 3.接口说明:setPopupTopTitleFontColor(PopupTopTitleFon
-
JS弹出居中的DIV的代码
首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义 document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度.大小随着浏览器的窗口大小而改变. document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度.大小随着浏览器的窗口大小而改变. document.body.scrollTop(网页被卷去的高):是指拉
-
html 锁定页面(js遮罩层弹出div效果)
复制代码 代码如下: <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> function createIf
随机推荐
- jQuery实现标题有打字效果的焦点图代码
- AngularJS基础 ng-keyup 指令简单示例
- Python利用ElementTree模块处理XML的方法详解
- MVC使用极验验证制作登录验证码学习笔记7
- .NET Framework中定时器timer的单线程与多线程使用讲解
- php使用strtotime和date函数判断日期是否有效代码分享
- php函数array_merge用法一例(合并同类数组)
- crontab无法执行php的解决方法
- 简单的php数据库操作类代码(增,删,改,查)
- MySQL单表百万数据记录分页性能优化技巧
- 了解WEB页面工具语言XML(二)定义
- js中如何把字符串转化为对象、数组示例代码
- mysql字符串的‘123’转换为数字的123的实例
- Mysql最新版本的数据库安装教程(5.7)
- Android UI体验之全屏沉浸式透明状态栏样式
- C#生成注册码的实例代码
- Java基于分治法实现的快速排序算法示例
- 微信小程序实现折叠面板
- JS实现获取汉字首字母拼音、全拼音及混拼音的方法
- Android自定义控件之电话拨打小键盘