`
jimengjuan
  • 浏览: 14225 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

div弹出窗口在frameset外层解决方案

阅读更多

1.遇到问题描述:

     

     我在一个页面中,使用的frameset的框架,在上面的frame框架中我加入了一个用div做的可以动态下拉的列表,但是在显示的时候,因为下面是另一个frame,所以列表被挡住了,原因是div的优先级小于frame的优先级,即使通过设置css属性:<div style="z-index:2;position:absolute;"/> <frame style="z-index:1;position:absolute;"/> 由于不在同一个页面中,z-index属性不起作用。

现找到两种解决方案:

(1)将frameset放在一个iframe;
(2)点击div后在frameset里面的frame显示一个div,这样做的话比较麻烦

 现在使用第一种方式解决了问题,方法提供如下:

2.图例展示效果:

 

<!--StartFragment -->

3.解决方法:

 

<html>
<head>
<title>index.jsp</title>
</head>
<frameset rows="*" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<frame name="divframe" src="call.html" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" noresize scrolling="no">
</frameset>
<noframes>
<body>
sorry your browser doesn't accept frames
</body>
</noframes>
</html>

 

 

 

首页div需要覆盖的frame 放到引入的页面里,用iframe调用。

---call.html---

<html>
<body>
<div id='popId' class='' style="position:absolute;float:left;top=5;left=25;display='none';z-index:2;"> 弹出div</div>
<iframe src="mainindex.html" width=100% height=100% marginwidth=0>
</body>
</html>

 

 

 

--mainindex.html--

<frameset rows="30,*" style="z-index:1">
<frame src="topframe.html" style="z-index:1">
<frameset cols="30,*" style="z-index:1">

<frame src="menuframe.html" style="z-index:1">
<frame src="mainframe.html" style="z-index:1">

</frameset>
<frame src="footframe.html" style="z-index:1">
</frameset>

 

js 动作

<a onclick="top.divframe.document.getElementById('popId').style.display='block'">显示DIv</a>

 

备注:事例代码可通过直接访问call.html页面获得需要的效果。

<!--StartFragment -->

分享到:
评论

相关推荐

    实现div 遮罩 frameset

    在这个场景中,“实现div 遮罩 frameset”意味着在`frameset`布局的网页上,使用`div`来实现一个可移动的遮罩层或弹出窗口。 首先,我们来看`frameset`。`frameset`是HTML4中的元素,它允许我们将浏览器窗口划分为...

    JS弹出窗口使用说明

    在frameset框架集中的使用需要注意,由于div无法浮在frameset之上,解决方案是在frameset外层添加iframe,将frameset嵌入iframe内。 此外,lhgdialog提供了一些预定义的对象,如`J.dialog.indoc`,`J.dialog.inwin`...

    以div代替frameset,用css实现仿框架布局

    总的来说,通过熟练运用`div`和CSS,我们可以创建出与`frameset`类似甚至更灵活的布局,同时避免了`frameset`带来的问题。这要求开发者具备良好的CSS理解和实践能力,以便根据具体需求调整和优化布局。在现代Web开发...

    div+css实现frameset网页布局

    `frameset`布局在早期的网页设计中颇为流行,它允许我们将浏览器窗口分割成多个独立显示区域,每个区域可以加载不同的网页内容。然而,随着Web标准的发展,`div+css`布局因其灵活性和可维护性逐渐成为主流。 `div`...

    lhgDialog JS弹出窗口 v4.0.0

    lhgdialog是一功能强大的简单迷你并且高效的弹出窗口组件。 专为大型弹出窗口定制 ...无论你把窗口组件放在哪里,你都不需要担心会被外层的frameset或iframe所遮挡进而影响客户体验,lhgdialog窗口组件是可以跨无限

    lhgdialog弹出窗口控件使用说明

    当页面使用frameset框架集时,lhgdialog无法直接浮动在frameset之上,此时需要在外层添加iframe,将frameset内容嵌入iframe,以实现对话框的浮动效果。 此外,lhgdialog提供了一系列对象,如`J.dialog.indoc`、`J....

    JS 非常棒的弹出窗口接口程序ymPrompt-4.0

    总结来说,ymPrompt-4.0是一个强大的JavaScript弹出窗口解决方案,它提供了丰富的功能和高度的可定制性,适用于各种类型的网页应用。无论是简单的提示信息还是复杂的表单操作,ymPrompt都能轻松应对,为开发者带来...

    frameset与div布局的优缺点

    frameset与div布局的优缺点比较 ...在选择前端布局时,DIV布局方式是一种更加明智的选择,它可以弥补掉Frameset布局的一些局限和缺点,并且也可以使用其他手段完成Frameset布局的优点,且实现难度较小。

    如何在frameset中跳转出来

    " Frameset 跳转技术详解" ...在本文中,我们详细介绍了 Frameset 跳转技术,并提供了相应的解决方案。使用 Frameset 跳转技术可以实现 Frameset 的跳转,提供了更好的用户体验,降低了开发难度,提高了系统的安全性。

    JS 表单验证 使用Frameset+Table布局(div也可)

    2 使用Frameset+Table布局(div也可) 3 对用户ID和用户名、口令不符合条件及时判断 4 对口令不一致进行及时判断 对34的及时判断,要求提示信息必须显示在同一个页面 也就是说显示在当前的行的后面或者上面或者下面 ...

    ymPrompt 消息提示 DIV弹出框 组件

    "ymPrompt 消息提示 DIV弹出框 组件"是一个专为网页设计的JavaScript插件,主要用于实现动态、可自定义的消息提示功能。这个组件基于HTML的DIV元素,通过CSS和JavaScript来创建一个弹出框,可以替代传统的alert、...

    ymPrompt-4.0弹出窗口

    这个工具集使开发者能够轻松地在网页上添加各种类型的弹出提示,同时允许用户自由拖动这些窗口,提高用户体验。 在描述中提到“很好用”,这暗示ymPrompt-4.0可能具有以下优点: 1. 用户友好:由于它提供了拖动功能...

    多个iframe,显示其中一个frame中的div,并处于最上层显示

    这样的需求通常出现在需要创建弹出窗口或对话框的场景,其中用户可以与特定的内容进行交互,而不会被其他元素遮挡。同时,还需要能够将页面上的数据传递到这个弹出的`div`页面中。 首先,理解`iframe`的基本概念至...

    frameSet应用 子父窗口传值

    本篇文章将详细讲解如何在`frameSet`环境下进行子父窗口间的通信以及如何通过点击左边的导航栏来更新右边的内容。 ### 1. `&lt;frameset&gt;`基本结构 `&lt;frameset&gt;`元素定义了浏览器窗口应该如何被分割。它包含零个或多...

    frameset遮罩

    在网页设计领域,"frameset遮罩"是一个重要的概念,...总的来说,frameset遮罩是一种创建交互式或动态效果的技术,但随着Web技术的发展,我们应谨慎使用frameset,并考虑采用现代的、更灵活的解决方案来实现类似功能。

    在frameset框架集中应用背景图片

    在探讨如何在frameset框架集中应用背景图片时,我们首先需要理解frameset的基本概念以及CSS在其中的应用方式。本文将详细介绍如何通过frameset布局来实现背景图片的有效展示,并且会结合具体的HTML代码示例进行说明...

    frameset

    虽然具体的细节没有给出,但我们可以推测这篇文章可能详细介绍了frameset的使用方法、优缺点以及如何在实际项目中逐步淘汰frameset并采用更现代的替代方案。 标签中提到的"源码"意味着讨论可能涉及到frameset在实际...

    DIV+CSS实现的框架,仿frameset,支持左侧缩进

    总的来说,这个项目提供了一种利用`DIV+CSS`替代`frameset`的解决方案,它既保留了多栏布局的功能,又避免了`frameset`的局限性,同时考虑到了老版本IE浏览器的兼容性问题。对于那些需要创建稳定、可维护且灵活布局...

    frameset元素属性详解

    在HTML中,`frameset`元素是一种用于定义多窗口(或称为框架)布局的特殊元素,它允许在一个HTML文档中嵌入多个独立的HTML文档,从而实现网页的分屏显示。这在早期网页设计中非常流行,尤其是在需要固定导航栏或侧...

    jquery $.data在frameset用法

    在frameset中frame页面读取另一frame页面$.data数据

Global site tag (gtag.js) - Google Analytics