点击按钮跳出隐藏的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 ...
随机推荐
- latex 竖排子图的生成
latex命令如下: 需要的包为: \usepackage{graphicx} \usepackage{subfigure} \begin{figure*}%加*的作用是跨栏(双栏和单栏latex的区 ...
- 分页组件 - layui.laypage
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- ionic项目中手机状态栏显示使用$cordovaStatusbar插件
在项目中发现Android和iOS在手机状态栏样式不一样,然后就查到有一个cordova插件可以解决这个问题 1.下载插件$cordovaStatusbar命令: cordova plugin add ...
- 51nod 1174 1174 区间中最大的数
题目链接:51nod 1174 1174 区间中最大的数 ST(Sparse Table)算法学习参考博客:http://blog.csdn.net/niushuai666/article/detai ...
- phpize建立php扩展 Cannot find config.m4
centos php 安装 memcache 扩展的时候 爆 Cannot find config.m4 错误 解决方案参考以下文章 参考文章 http://blog.csdn.net/wgl ...
- 当 jquery.unobtrusive-ajax.js 遇上Web API
最近在熟悉Abp框架,其基于DDD领域驱动设计...前段可以绕过mvc直接调用根据app层动态生成的webapi,有点神奇~,Web API之前有简单接触过,WCF的轻量级版,一般用于做一写开发性的服 ...
- js对特殊字符转义、时间格式化、获取URL参数
/*特殊字符转义*/ function replace_html(str) { var str = str.toString().replace(/&/g, "&" ...
- Ajax实现原理
Ajax的工作 Ajax直觉认识:我们发送一个请求,但是这个请求比较特殊它是异步的,也就是说客户端是不会感觉到的.在发送这个请求的时候我们绑定了一个事件,这个事件会监控我们发送请求的状态,并且每次状态 ...
- NPOI 导出Excel2007版本时出现流已关闭问题
NPOI生产.xlsx文件件时,在使用book.Write(ms);后,会关闭流,这样导致再次使用Respons输出流的时候就出错了. 我看到一些网友提供的解决办法是: public class NP ...
- 面试复习(C++)之归并排序
#include <iostream> #include<stdlib.h>//引入malloc using namespace std; void Merge(int *a, ...