热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

javascript窗口加载蒙板内嵌网页内容_javascript技巧

用于在现有窗口上加载蒙板,在蒙板内在嵌入其他页面内容
代码如下:


//初始化导航背景,iframe容器
function fnDaoHangBg()
{
var h = fnGetHeight(),w = fnGetWidth();//获取背景窗口大小
if(!$('pDaoHangBg'))
{
var p = $C('p');//创建背景蒙板
p.id = 'pDaoHangBg';
p.style.backgroundColor = 'black';
p.style.position = 'absolute';
p.style.filter = 'alpha(opacity=80)';
p.style.opacity = '.80';
p.style.zIndex = 100001;
p.style.left = 0;
p.style.top = 0;
p.style.width = w+'px';
p.style.height= h+'px';
document.body.appendChild(p);
}

if(!$('pDaoHangBgIframe'))
{
var iframe;
iframe = this.$C('IFRAME');//创建蒙板内的内嵌iframe容器,用于嵌入显示其他网页
iframe.id = 'pDaoHangBgIframe';
iframe.frameBorder = '0';
iframe.scrolling = "no";
iframe.style.overflow = 'hidden';
iframe.allowTransparency = 'true';
iframe.style.display = 'none';
iframe.style.width = w+'px';//800
iframe.style.height = h+'px';//620
iframe.style.marginTop = '75px';//800
$('pDaoHangBg').appendChild(iframe);
}
if(!$('pDaoHangBgClose'))
{
var p = $C('p');//创建关闭按钮在蒙板上
p.id = 'pDaoHangBgClose';
p.style.position = 'absolute';
p.style.backgroundImage='url(images/closb.gif)';
p.style.zIndex = 100003;
p.style.right = 10;
p.style.top = 20;
p.style.width = '82px';
p.style.height= '30px';
p.title='关闭';
p.style.cursor='hand';
p.Onclick=function(){//点击时间 ,关闭蒙板
fnDaoHangBgClose();
};
$('pDaoHangBg').appendChild(p);
}
$('pDaoHangBgIframe').style.display='block';
$('pDaoHangBg').style.display='block';
}
//关闭蒙板
function fnDaoHangBgClose()
{
if(!$('pDaoHangBg')){return;}
if(!$('pDaoHangBgIframe')){return;}
$('pDaoHangBgIframe').src='';
$('pDaoHangBgIframe').style.display='none';
$('pDaoHangBg').style.display='none';
}
//调用,内嵌url
function fnDaoHangBgShow(url)
{
fnDaoHangBg();
$('pDaoHangBgIframe').src=url;
}


其中 $()和$C()分别表示
$(id),获取该id的对象,document.getElementById(id)
$C(tag),创建一个标签, document.createElement(tag);
推荐阅读
  • 深入解析Spring启动过程
    本文详细介绍了Spring框架的启动流程,帮助开发者理解其内部机制。通过具体示例和代码片段,解释了Bean定义、工厂类、读取器以及条件评估等关键概念,使读者能够更全面地掌握Spring的初始化过程。 ... [详细]
  • PostgreSQL 最新动态 —— 2022年4月6日
    了解 PostgreSQL 社区的最新进展和技术分享 ... [详细]
  • 烤鸭|本文_Spring之Bean的生命周期详解
    烤鸭|本文_Spring之Bean的生命周期详解 ... [详细]
  • 本文探讨了现代分布式架构的多样性,包括高并发、多活数据中心、容器化、微服务、高可用性和弹性架构等,并介绍了与这些架构相关的重要管理技术,如DevOps、应用监控和自动化运维。文章还深入分析了分布式系统的核心概念、主要用途及类型,同时对比了单体应用与分布式服务化的优缺点。 ... [详细]
  • 深入解析Spring Boot自动配置机制
    本文旨在深入探讨Spring Boot的自动配置机制,特别是如何利用配置文件进行有效的设置。通过实例分析,如Http编码自动配置,我们将揭示配置项的具体作用及其背后的实现逻辑。 ... [详细]
  • 本文档详细介绍了如何构建和配置 EFKLK(Elasticsearch, Fluentd, Kibana, Kafka)日志采集工具链,包括命名空间创建、Elasticsearch 镜像拉取与容器运行、证书生成及配置、Helm 安装等步骤。 ... [详细]
  • 本文详细探讨了在微服务架构中,使用Feign进行远程调用时出现的请求头丢失问题,并提供了具体的解决方案。重点讨论了单线程和异步调用两种场景下的处理方法。 ... [详细]
  • Eclipse 中 JSP 开发环境配置指南
    本文详细介绍了如何在 Eclipse 集成开发环境中配置 JSP 运行环境,包括必要的软件下载、Tomcat 服务器的配置以及常见问题的解决方法。 ... [详细]
  • 本文详细介绍了Java集合框架中的Collection体系,包括集合的基本概念及其与数组的区别。同时,深入探讨了Comparable和Comparator接口的区别,并分析了各种集合类的底层数据结构。最后,提供了如何根据需求选择合适的集合类的指导。 ... [详细]
  • JESD204C 入门:第2部分新特性及其内容
    本文内容来自ADI的技术文章,作者:DelJones原网址为:https:www.analog.comcnanalog-dialoguea ... [详细]
  • 本文详细介绍了如何正确安装Java EE SDK,并解决在安装过程中可能遇到的问题,特别是关于servlet代码在Apache Tomcat 10中无法运行的情况。 ... [详细]
  • 本文探讨如何利用Java反射技术来模拟Webwork框架中的URL解析过程。通过这一实践,读者可以更好地理解Webwork及其后续版本Struts2的工作原理,尤其是它们在MVC架构下的角色。 ... [详细]
  • 本文详细介绍了 Kubernetes 集群管理工具 kubectl 的基本使用方法,涵盖了一系列常用的命令及其应用场景,旨在帮助初学者快速掌握 kubectl 的基本操作。 ... [详细]
  • 本文探讨了Web开发与游戏开发之间的主要区别,旨在帮助开发者更好地理解两种开发领域的特性和需求。文章基于作者的实际经验和网络资料整理而成。 ... [详细]
  • 本文将指导您如何在Docker环境中高效地搜索、下载Redis镜像,并通过指定或不指定配置文件的方式启动Redis容器。同时,还将介绍如何使用redis-cli工具连接到您的Redis实例。 ... [详细]
author-avatar
爱你一辈子2502860605
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有