【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 ...

随机推荐

Subordinates（贪心）
题目大意: 一共有N个员工,其中最高领导人是编号s的人,每个人都只有一个直接领导,每个人都说出了自己领导的个数,问最少有几个人撒谎了. 思路: 合理的贪心是该把排最后的数变成缺少的数字,然后继续判断. ...
How Many Answers Are Wrong（带权并查集）
题目带权并查集的博客~ 题目: 多组输入数据.n,m.你不知道[1,n]内任意区间内值的和. m次询问,a b 是端点,都在n的范围以内 : v表示 [a,b]的区间内值的和.对每次询问,判断v是否 ...
使用java中的反射获得object对象的属性值
知识点:使用java中的反射获得object对象的属性值一:场景这两天开发代码时,调用别人的后台接口,返回值为Object对象(json形式的),我想获得object中指定的属性值,没有对应的ge ...
vue 后台获取文件流导出excel文件
let params = { compStartTm: Date.parse(this.searchForm.compStartTm) / 1000, compEndTm: Date.parse(th ...
BZOJ 4029 [HEOI2015] 定价 ( 数位DP/贪心 )
前言最近学了数位DP,感觉挺简单又实用.这道题就比较水,可以用300B的贪心过掉-网上似乎大多是贪心的题解,我就写写DP的做法题意给出正整数区间[L,R][L,R][L,R],定义荒谬值为 (去 ...
Time travel HDU - 4418 (概率DP)
对于每个点两个方向(两头只有一个方向)建一个点,然后预处理出每个点走k(1≤k≤n)k(1\le k\le n)k(1≤k≤n)到哪个点,列出方程式高斯消元就行了.记得前面bfsbfsbfs出那些点不 ...
P4317 花神的数论题动态规划？数位DP
思路:数位$DP$ 提交:5次(其实之前A过,但是调了调当初的程序.本次是2次AC的) 题解: 我们分别求出$sum(x)=i$,对于一个$i$,有几个$x$,然后我们就可以快速幂解决. 至于求个数用 ...
webservice的优缺点
优点: 1.采用xml支持跨平台远程调用. 2.基于http的soap协议,可跨越防火墙 3.支持面向对象开发 4.有利于软件和数据的重用,实现松耦合. 缺点: 1.由于soap是基于xml传输,本身 ...
PRIMARY KEY，key，unique key
主键索引(必须指定为“PRIMARY KEY”,没有PRIMARY Index). 唯一索引(unique index,一般写成unique key). 普通索引(index,只有这一种才是纯粹的in ...
tree/pstree
tree yum install tree 不指定路径的话直接显示当前目录的结构加上-L 表示只显示到指定的目录层级 tree -L 2 ./

【JS新手教程】弹出两层div，及在LODOP内嵌上层

【JS新手教程】弹出两层div，及在LODOP内嵌上层的更多相关文章

随机推荐

热门专题