首先，做一个简单的div弹出层用于测试，该弹出层的介绍可查看本博客另一篇博文：【JS新手教程】浏览器弹出div层

然后加入LODOP内嵌，LODOP可以内嵌，C-LODOP不能内嵌，可以在IE等浏览器下查看内嵌效果。
如图，在这个做的简单弹出层的代码基础上，加了LODOP内嵌和一个文本框，当文本框的内容为空的时候，显示弹出层，不为空的时候显示打印设计内嵌。

被遮挡的原代码：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>WEB打印控件LODOP</title>

<script language="javascript" src="LodopFuncs.js"></script>

<style>

 .buledivv{display:none;position:absolute;top:20%;left:20%;width:400px;height:200px;background-color:#7da0e1;z-index:10000;}

  </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"> <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'">

    确定，关闭该提示</a></td></tr></table>

</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';

       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>

</body>

被遮挡的原图示：

解决方法是加个空的iframe，可以让弹出层在LODOP的上层。

代码：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>WEB打印控件LODOP</title>

<script language="javascript" src="LodopFuncs.js"></script>

<style>

 .buledivv{display:none;position:absolute;top:20%;left:20%;width:400px;height:200px;background-color:#7da0e1;z-index:10000;}

  </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'">

    确定，关闭该提示</a></td></tr></table>

</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';

       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>

</body>

图示：由于之前的图已经有大部分代码了，这里只是加了个iframe，所以图中省去了其他部分。

LODOP内嵌挡住浏览器的div弹出层的更多相关文章

  1. div弹出层的效果带关闭按钮

    下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .t ...

  2. 页面DIV弹出层 JS原生脚本

    <script type="text/javascript"> /*         * 弹出DIV层         */ function showDiv() { ...

  3. 关于div弹出层的实际应用心得

    今天本人要做一个点击弹出的功能,因为这个功能是最后做的,所以写的时候很纠结, 因为本人小菜一枚, 开始尝试用 position:relative:来做一试不行呀 ,因为用这个来做的话 会打乱原有的布局 ...

  4. 一个简单的div弹出层的小例子

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

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

    前面的博文有个简单的弹出div层[JS新手教程]浏览器弹出div层1,有一层,不过为了提示,一般会不让用户可以点击该提示之外的地方的.如果让用户弹出层后,把其他的按钮和链接都设置不可用应该比较麻烦,如 ...

  6. DIV弹出和关闭新DIV

    代码用HTML+JS实现: 代码(用HTML+JS实现): <!doctype html> <html lang="UTF-8"> <head> ...

  7. div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

  8. 使用Jq实现弹出层

    对于前端程序员来说,弹出层是经常用到的,下面我叫大家如何用实现JQuery实现弹出层的效果,代码如下: CSS:弹出层的效果 .mask { position: absolute; top: 0px; ...

  9. layui弹出层回调的使用

    <%@page language="java" contentType="text/html; charset=UTF-8"%> <%@ in ...

随机推荐

  1. 2018.06.30 BZOJ 2342: [Shoi2011]双倍回文（manacher）

    2342: [Shoi2011]双倍回文 Time Limit: 10 Sec Memory Limit: 128 MB Description Input 输入分为两行,第一行为一个整数,表示字符串 ...

  2. 转@RequestParam，@PathParam，@PathVariable等注解区别

    转自:http://blog.csdn.net/u011410529/article/details/66974974 @RequestParam 和 @PathVariable 注解是用于从requ ...

  3. HDU 1087 Super Jumping! Jumping! Jumping! （DP+LIS）

    题意:给定一个长度为n的序列,让你求一个和最大递增序列. 析:一看,是不是很像LIS啊,这基本就是一样的,只不过改一下而已,d(i)表示前i个数中,最大的和并且是递增的, 如果 d(j) + a[i] ...

  4. 11) 生成可执行jar文件 maven-shade-plugin

    搜索 site:maven.apache.org maven-assembly-plugin http://maven.apache.org/plugins/maven-assembly-plugin ...

  5. 《Forward团队-爬虫豆瓣top250项目-设计文档》

    成员:马壮,李志宇,刘子轩,年光宇,邢云淇,张良 设计方案: 1.能分析HTML语言: 2.提取重要数据,并保存为文本文档: 3.用PY代码调取文本文档的数据: 4.编写提取部分数据的python代码 ...

  6. Codeforces777C Alyona and Spreadsheet 2017-05-04 17:46 103人阅读 评论(0) 收藏

    C. Alyona and Spreadsheet time limit per test 1 second memory limit per test 256 megabytes input sta ...

  7. bootstrap collaspe

    和modal类似:也是通过data-toggle, data-target来指定: 可以把折叠插件改为手风琴,如果指定data-parent,那这个data-parent元素下的折叠插件就会像手风琴一 ...

  8. Java Spring 后端项目搭建

    参考了几位同行的Blogs和StackOverflow上的许多问答,搭建了此后端项目,替换原来的node.js后端,和前一篇中搭建的Vue Web App项目配合使用,后端准备只提供服务,不包含后端装 ...

  9. 阿里巴巴集团2013实习生招聘技术类笔试卷（B）

    一.单选题 1.在常用的网络协议中,___是面向连接的.有重传功能的协议. A.IP   B.TCP    C.UDP    D.DXP 2.500张多米诺骨牌整齐地排成一列,依顺序编号为1.2.3… ...

  10. Spring Boot 2 实践记录之 Powermock 和 SpringBootTest

    由于要代码中使用了 Date 类生成实时时间,单元测试中需要 Mock Date 的构造方法,以预设其行为,这就要使用到 PowerMock 在 Spring Boot 的测试套件中,需要添加 @Ru ...