Div层弹出

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>点击文字弹出一个DIV层窗口代码</title>
<style>
.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=88);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 55%;
height: 55%;
padding: 20px;
border: 10px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>示例弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById(‘light‘).style.display=‘block‘;document.getElementById(‘fade‘).style.display=‘block‘">请点这里</a></p>
<div id="light" class="white_content">这是一个层窗口示例程序. <a href = "javascript:void(0)" onclick = "document.getElementById(‘light‘).style.display=‘none‘;document.getElementById(‘fade‘).style.display=‘none‘">点这里关闭本窗口</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

时间： 2024-08-24 07:13:22

Div层弹出的相关文章

div+js 弹出层

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background

div滚动条弹出层效果

<%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none"> <table style="width:430px; height:7px;" border="0" cellpadding="0" cellspacing="0" > <tr style=&

JavaScript动态实现div窗口弹出&amp;消失功能

先积累一个JavaScript动态实现div窗口弹出&消失功能 首先是index.jsp代码 <html> <head> <link rel="stylesheet" href="css/DivStyle.css" media="screen"> <script type="text/javascript" src="scripts/div.js">&

jquery css div （弹出）显示隐藏层

css代码段 .crm_tc_bg { width: 100%; height: 100%; position: fixed; display: block; top: 0; left: 0; background: #000; filter: apha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; z-index: 1000; } .crm_tc_box { width: 300px; min-height: 200px; max-height:

EasyUI 第二层弹出框

这是孙宇在EasyUI拓展时的代码. 可以根据实际需要自行修改. $.modalDialog2.handler 这个handler代表弹出的dialog句柄 $.modalDialog2.xxx 这个xxx是可以自己定义名称,主要用在弹窗关闭时,刷新某些对象的操作,可以将xxx这个对象预定义好 $.modalDialogTwo = function(options) {  if ($.modalDialogTwo.handler == undefined) {// 避免重复弹出 var opts

实现移动端弹出层弹出的时候页面不能滑动，关闭弹出层时页面恢复滑动

思路是:显示弹层时,禁用触摸事件 在你显示弹出框的时候:添加: function ShowDiv() { window.ontouchmove = function(e) { e.preventDefault && e.preventDefault(); e.returnValue = false; e.stopPropagation && e.stopPropagation(); return false; } } 在关闭弹层时,添加: function CloseDiv

jQuery mobile 中div圆角弹出层

HTML: <div id="div_layer" class="div_layer"> 已经是最后一个题目 </div> CSS: .div_layer { left: 0; right: 0; position: fixed; z-index: 1001; margin: auto; bottom: 100px; display: none; color: white; background-color: black; -moz-bord

js遮罩层弹出框

昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了一定指出呀 <style> #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #fff;} #H-dialog .close{float:right;font-size: 30px;margi

一组li或者div里面多个弹出层对应各自的内容

今天在一个做一个页面开发的时候发现了这个需求,简单的给大家描述一下我的使用环境: 射鸡师要求点击每一个卡片上的查看更多需要弹出各自的内容: 可能有同学会说了,每个卡片下面写一个div当做弹出层就ok了.从效果上说,这样的方法是可以实现的,但是他存在以下的弊端: 1.代码量臃肿 2.工作量成倍增长 3.不方便维护 ... 我的实现原理和方法: 需要弹出的内容,我直接将他们存在json中去,然后点击的那一个“查看更多”遍历对应的json,将内容插入到弹出中即可,这样也只是需要些一个弹出层div!可能