点击按钮跳出隐藏的div层,并设背景。
style:
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #696969;
z-index:;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=88);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 55%;
height: 55%;
padding: 20px;
border: 10px solid #ddd;
background-color: white;
z-index:;
overflow: auto;
}
html:
<p>示例弹出层:<BUTTON onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</BUTTON></p>
<div id="light" class="white_content"> 这是一个层窗口示例程序.
<BUTTON onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</BUTTON>
</div>
<div id="fade" class="black_overlay"></div>
点击按钮跳出隐藏的div层,并设背景。的更多相关文章
- 点击按钮弹出一个div层
JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
- 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- js的事件冒泡和点击其他区域隐藏弹出层
一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...
- 点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- javascript 点击按钮实现隐藏显示切换效果
原文链接:http://www.jb51.net/article/79083.htm <html> <head> <meta charset="gb2312&q ...
- 点击按钮对两个div的隐藏与显示进行切换
HTML: <button type="button" id="showHidden">点击切换div的隐藏与显示</button> ...
- 点击文字弹出一个DIV层窗口代码 【或FORM表单 并且获取点击按钮的ID值】
点击不同按钮咨询不同的 专家 <?php for($i=1;$i<5;$i++){ $uid=$i; //用户ID ?> <a class="a_click" ...
- JS 点击按钮后弹出遮罩层,有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
随机推荐
- 如何查看python 的api
python 搭建好python开发环境后,怎么查看api文档呢? 其实很简单: 首先打开命令行,在dos窗口输入: python -m pydoc -p 4895 python -m pydoc - ...
- tcpdump捕捉样例
欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...
- linux指令(一)文件的操作
ls -i 查看文件的inode号 find ./ inum 1651190 -exec rm -i {} \; 根据inode号删除文件
- javaWeb中 servlet 、request 、response
1.Servlet (1)Servlet是JavaEE的一个动态web资源开发技 术,就是在服务器上运行的小程序,这个小程序是由服务器调用的,服务器为了能调用这个小程序,就要求这样的程序必须实现一个S ...
- 常用的WEB服务
1.股票行情数据 Web Service(支持香港.深圳.上海基金.债券和股票:支持多股票同时查询) http://www.webxml.com.cn/WebServices/StockInfoWS ...
- js中Json 对象,Json字符串转换
//tmppcd 是一个对象 //JSON.stringify() 是把对象转换成json 字符串
- css 伪元素分享!!!
最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...
- checkbox设置单选
http://blog.sina.com.cn/s/blog_4550f3ca010137td.html $("*") ‘表示获取所有对象 $("#XXX" ...
- glob模式
在学习gulp的过程中,gulp使用了被称作为glob的文件匹配模式. 接下来我们认识下什么是glob模式. 在计算机编程中,特别是类Unix环境,glob模式通过通配符来匹配文件名.例如:Unix命 ...
- JavaEE Log4j
1.Log4j是Apache的一个开放源代码项目,可以通过一个配置文件来灵活的进行配置,而不需要修改应用的代码. 2.Log4j有三个主要部件组成: 记录器:按照布局中指定的格式把日志信息写入一个或多 ...