【JS新手教程】弹出两层div，及在LODOP内嵌上层
前面的博文有个简单的弹出div层【JS新手教程】浏览器弹出div层1，有一层，不过为了提示，一般会不让用户可以点击该提示之外的地方的。
如果让用户弹出层后，把其他的按钮和链接都设置不可用应该比较麻烦，如果弹出一个和浏览器页面同大小的div弹出层，看上去又不美观，所以可以设置两层弹出层，一层在下面，挡住页面的其他部分，一层作为普通的提示用的小弹出层。
后面的那个当作背景的弹出层，后面的背景层最好一定透明度，这样可以穿过这个div看到后面的页面，让用户知道这个还在当前页面上，这个弹出是在当前页面的。
后面的层可以挡住后面页面的内容，这样就避免了用户不关闭当前弹出的div就点击后面页面的地方。
双层弹出层代码：
<style>
.buledivv{display:none;position:absolute;top:20%;left:20%;width:400px;height:200px;background-color:#7da0e1;z-index:1000000;}
.blackdivv{display: none;position: absolute;top:0%;left:0%;width:100%;height:100%;background-color: black;
z-index:100000;/*设置z-index小于上层的div，这个div是当作背景的*/
/*设置不透明度为80*/
-moz-opacity:0.8;/*IE*/
opacity:.80; /*Mo+FF*/
filter:alpha(opacity=80);} /*支持CSS3的浏览器（FF 1.5也支持*/
/*设置不透明度为80*/
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="document.getElementById('wo').style.display='block';document.getElementById('bkblak').style.display='block'">点击这里打开窗口</a>
<div id="wo" class="buledivv">
<table>
<tr><td width=400px height=100px align=center><span style="font-size:20px;">请先输入内容，不能为空！</span></td></tr>
<tr><td width=400px height=100px align=center><a href="javascript:void(0)" onclick="document.getElementById('wo').style.display='none';document.getElementById('bkblak').style.display='none'">
确定，关闭该提示</a></td></tr></table>
</div>
<div id="bkblak" class="blackdivv">
</div>
图示：
前面的博文介绍过在lodop的内嵌上弹出：LODOP内嵌挡住浏览器的div弹出层 ，可以赢空iframe+div方式，由于这个弹出层是两个div，所以要加两个空iframe，每个div里都加。
代码：
<style>
.buledivv{display:none;position:absolute;top:20%;left:20%;width:400px;height:200px;background-color:#7da0e1;z-index:1000000;}
.blackdivv{display: none;position: absolute;top:0%;left:0%;width:100%;height:100%;background-color: black; z-index:100000; -moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}
</style>
</head> <body>
<object id="LODOP1" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=410 height=307>
<param name="Caption" value="内嵌显示区域">
<param name="Border" value="1">
<param name="Color" value="#C0C0C0">
<embed id="LODOP_EM1" TYPE="application/x-print-lodop" width=410 height=307 PLUGINSPAGE="install_lodop.exe">
</object> <br> <input type="text" id="T1" size="15"><a href="javascript:prn1_preview()">打印设计</a><br> <div id="wo" class="buledivv">
<iframe style="position:absolute;z-index:-1;width:100%;height:100%;top: 0;
left:0;scrolling:no;" frameborder="0" src="about:blank"></iframe>
<table>
<tr><td width=400px height=100px align=center><span style="font-size:20px;">请先输入内容，不能为空！</span></td></tr>
<tr><td width=400px height=100px align=center><a href="javascript:void(0)" onclick="document.getElementById('wo').style.display='none';document.getElementById('bkblak').style.display='none'">
确定，关闭该提示</a></td></tr></table>
</div>
<div id="bkblak" class="blackdivv">
<iframe style="position:absolute;z-index:-1;width:100%;height:100%;top: 0;
left:0;scrolling:no;" frameborder="0" src="about:blank"></iframe>
</div> <script language="javascript" type="text/javascript">
var LODOP; //声明为全局变量
function prn1_preview() {
var tex=document.getElementById('T1').value;
if(tex=="")
{document.getElementById('wo').style.display='block';document.getElementById('bkblak').style.display='block';}
else
prn2_preview();
};
function prn2_preview() {
LODOP=getLodop(document.getElementById('LODOP1'),document.getElementById('LODOP_EM1'));
LODOP.PRINT_INIT("");
LODOP.ADD_PRINT_TEXT(91,69,100,25,document.getElementById('T1').value);
LODOP.SET_SHOW_MODE("DESIGN_IN_BROWSE",1);//打印设计界面内嵌
LODOP.PRINT_DESIGN();//打印设计
};
</script>
图示：
【JS新手教程】弹出两层div，及在LODOP内嵌上层的更多相关文章
- Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- 【JS新手教程】浏览器弹出div层1
JS中,可以弹出一个层来进行提示等作用,方法是利用css样式display样式,当display等于none时,该元素就不会在页面显示出来,而且元素也不会占空间.就是用户触发某些事件时,动态修改该样式 ...
- js点击弹出div层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- LODOP内嵌挡住浏览器的div弹出层
首先,做一个简单的div弹出层用于测试,该弹出层的介绍可查看本博客另一篇博文:[JS新手教程]浏览器弹出div层 然后加入LODOP内嵌,LODOP可以内嵌,C-LODOP不能内嵌,可以在IE等浏览器 ...
- JS 点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- js进阶 11-20 弹出层如何制作
js进阶 11-20 弹出层如何制作 一.总结 一句话总结:其实就是一个div,控制显示和隐藏即可.设置成绝对定位更好,就可以控制弹出层出现的位置.关闭的画质需要将display重新设置为none就好 ...
- js 弹出 隐藏层和cookie
<script type="text/javascript"> function checkCookie(show_div, bg_div) { var smtstk ...
- JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...
随机推荐
- MYSQL参数说明
[mysqld] character_set_server=utf8 #慢日志时间 long_query_time=1 #开启慢日志 slow_query_log=TRUE #慢日志位置 slow_q ...
- Vuex的mapGetters方法使用报错
报错信息: ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script ...
- c语言1博客作业07
一.本周作业头 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/SE2019-3/homework/9929 我 ...
- python面向对象基础（四）内置方法 __xx__之new与init
__init__和__new__方法 __new__() 是在新式类中新出现的方法,它作用在构造方法建造实例之前,可以这么理解,在 Python 中存在于类里面的构造方法 __init__() 负责将 ...
- BZOJ 3903 反垄断 (最大流推的结论题)
题目 中文题目,不解释: BZOJ传送门 分析 这道题BZOJ上也只有几个人过-奇怪了 下面是正解 原问题为一个二分图边染色问题.首先考虑最好情况.最理想情况的分配为:设一个点xxx的度为dgr(x) ...
- MVC路由规则进一步了解
本周由于工作需要,接触了PetaPoco(一个小型的ORM-框架)和ExtJS,这个项目框架是别人写好的,用的是MVC,我写的MVC程序一般控制器和视图都是在一个类库下面的,但是作者是把MVC中的控制 ...
- luogu 4909 [Usaco2006 Mar]Ski Lift 缆车支柱 动态规划
可以出模拟赛T1? #include <bits/stdc++.h> #define N 5002 #define inf 1000000 #define setIO(s) freopen ...
- 2018 Nowcoder Multi-University Training Contest 1
Practice Link J. Different Integers 题意: 给出\(n\)个数,每次询问\((l_i, r_i)\),表示\(a_1, \cdots, a_i, a_j, \cdo ...
- APIO2009 抢掠计划 Tarjan DAG-DP
APIO2009 抢掠计划 Tarjan spfa/DAG-DP 题面 一道\(Tarjan\)缩点水题.因为可以反复经过节点,所以把一个联通快中的所有路口看做一个整体,缩点后直接跑\(spfa\)或 ...
- LibreOJ #113. 最大异或和
二次联通门 : LibreOJ #113. 最大异或和 /* LibreOJ #113. 最大异或和 线性基 插入 与 查询最大值 说一下我在学习线性基时遇到的一些问题 1.线性基指的是一个数集 2. ...