点击按钮跳出隐藏的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 ...
随机推荐
- flask笔记1-安装
1.创建应用的根目录: 2.在根目录下创建独立的虚拟python运行环境,创建完成后当前目录会有一个文件夹,即该独立环境(使用--no-site-pachages参数将不会复制任何系统python环境 ...
- jenkins添加git源码目录时报Error performing command错误
简介 这是我在构建一个自动化部署项目中遇到的一个异常 解决步骤: 1.进入的jenkins的home目录,执行下面命令生成公钥和私钥 [root@jacky .jenkins]# ssh-keygen ...
- SSH连接超时不自动断开
Putty 启用putty keepalive putty -> Connection -> Seconds between keepalives ( 0 to turn off ),默认 ...
- svg转化成canvas以便生成base64位的图片
很久前写了关于把html转成图片的一个例子,最近有出了新的问题.利用html2canvas.js文件把html转成base64位的图片是没什么问题的,但也不是绝对的,比如这时候不能碰见svg这个鬼,h ...
- ERROR [IM002] [Microsoft][ODBC 驱动程序管理器] 未发现数据源名
连接excel odbc时发生如下问题: 是因为数据源(odbc)没有配置excel 驱动:控制面板->管理工具->数据源(ODBC): 添加: 如无效果,则可能是位数引起的,比如系统是6 ...
- 学习笔记找到多个具有相同 ID“_header”的控件,FindControl 要求控件具有唯一的 ID.
解决 找到多个具有相同 ID“_header”的控件,FindControl 要求控件具有唯一的 ID. private void DisplayHotBooks() { //获取 ...
- 269. Alien Dictionary 另类字典 *HARD*
There is a new alien language which uses the latin alphabet. However, the order among letters are un ...
- MySQL数据库的备份与还原
http://www.cnblogs.com/lql123/p/6090681.html //安装WordPress 1.备份 密码为:AAAzzz//123 mysqldump -uroot ...
- wind取交易日历n day数据
days=AlldaysPeriod=Mw.tdaysoffset(5,'20171212','days=Tradingdays;Period=D')
- c#文本框限制输入内容
//限制输入不能为中文和全角 private void zhbh_KeyPress(object sender, KeyPressEventArgs e) { ...