实现div遮罩frameset资源-CSDN下载

共66个文件

png：28个

gif：16个

html：12个

4星 · 超过85%的资源需积分: 50 58 浏览量 2010-10-18 09:08:23 上传评论 1 收藏 71KB RAR 举报

在网页设计中，`div` 和 `frameset` 是两种重要的HTML元素，它们分别用于不同的布局和内容组织目的。`div`（division）是网页布局的基础，而`frameset`则用于创建多窗口或者区域的页面布局。在这个场景中，“实现div 遮罩 frameset”意味着在`frameset`布局的网页上，使用`div`来实现一个可移动的遮罩层或弹出窗口。我们来看`frameset`。`frameset`是HTML4中的元素，它允许我们将浏览器窗口划分为多个框架，每个框架可以独立加载不同的网页内容。`frameset`通过`<frameset>`和`<frame>`标签来定义框架的结构。例如： ```html <frameset cols="50%,50%"> <frame src="page1.html"> <frame src="page2.html"> </frameset> ``` 这段代码将浏览器窗口分为两个相等宽度的列，分别加载`page1.html`和`page2.html`的内容。然后，我们转向`div`元素。`div`是一个无语义的容器，可以容纳其他HTML元素并对其进行样式化。在实现遮罩层或弹出窗口时，`div`通常设置为全屏，并添加透明度和点击事件，以实现点击任何地方关闭的效果。下面是一个简单的例子： ```html <style> .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; /* 初始隐藏 */ z-index: 9999; /* 设置高优先级，确保遮罩层在其他元素之上 */ } .popup { position: absolute; width: 300px; height: 200px; background-color: #fff; border: 1px solid #000; padding: 20px; z-index: 10000; /* 高于遮罩层，但低于其他页面元素 */ } </style> <div class="overlay"></div> <div class="popup"> 弹出窗口内容 </div> <script> // 点击遮罩层关闭弹出窗口 document.querySelector('.overlay').addEventListener('click', function() { this.style.display = 'none'; document.querySelector('.popup').style.display = 'none'; }); </script> ``` 在这个例子中，`.overlay`是遮罩层，`.popup`是弹出窗口。当用户点击遮罩层时，弹出窗口和遮罩层都会消失。结合`frameset`和`div`，我们可以创建一个在框架集页面上浮动的弹出层。例如，我们可以将弹出层定位到特定的框架内，或者让它覆盖整个框架集。这需要通过JavaScript获取框架的位置和大小，然后相应地调整`div`的样式。这样，用户可以在框架内的任意位置触发弹出层，而弹出层仍然能够正确显示并具有交互性。在压缩包文件“框架弹出层的运用”中，可能包含了一些示例代码或教程，用于演示如何在`frameset`布局的网页上实现这样的功能。具体实现方式可能涉及CSS的定位、JavaScript的事件监听以及动态计算和调整`div`元素的属性。通过学习这些示例，开发者可以更好地理解和掌握在复杂布局中创建动态弹出层的技术。

资源推荐

资源详情

资源评论

收起资源包目录

框架弹出层的运用.rar （66个子文件）

框架弹出层的运用

right.html 22KB

_content

01.html 492B

06.html 1KB

05.html 2KB

value.html 2KB

02.html 945B

03.html 737B

04.html 726B

main.html 634B

_lhgdialog.js 16KB

lhgcore.min.js 22KB

lhgdialog.js 10KB

images

d_x.gif 206B

d_btn.gif 1KB

wait.gif 771B

d_bg.gif 933B

left.html 201B

lhgdialog.css 3KB

_skins

areo_gray

rightBottom.png 512B

rightTop.png 643B

bottom.png 335B

leftBottom.png 514B

d_btn.gif 1KB

right.png 231B

leftTop.png 562B

top.png 300B

lhgdialog.css 3KB

left.png 233B

xbtn.png 474B

areo_blue

rightBottom.png 542B

rightTop.png 700B

bottom.png 351B

leftBottom.png 567B

d_btn.gif 1KB

right.png 243B

leftTop.png 574B

top.png 324B

lhgdialog.css 3KB

left.png 243B

xbtn.png 474B

default

d_x.gif 206B

d_btn.gif 1KB

d_bg.gif 933B

lhgdialog.css 3KB

skyblue2

dialog_mrt.png 345B

dialog_lt.png 463B

dialog_rb.png 342B

dialog_lb.png 337B

d_btn.gif 1KB

dialog_closebtn.png 415B

dialog_mlt.png 336B

dialog_closebtn_over.png 463B

dialog_ct.png 4KB

lhgdialog.css 3KB

dialog_cb.png 1KB

dialog_rt.png 489B

skyblue

d_x.gif 204B

d_btn.gif 1KB

d_bg.gif 2KB

lhgdialog.css 3KB

extjs

d_x.gif 87B

d_btn.gif 1KB

d_bg.gif 592B

lhgdialog.css 3KB

index.html 1KB

top.html 193B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>lhgdialog - samples</title> <style type="text/css"> .contain{padding:10px 50px;} .contain h2{font-size:18px;color:#1E9300;padding-top:8px;margin-bottom:8px;cursor:pointer;} .contain h3{margin-top:8px;margin-bottom:8px;FONT:bold 14px 宋体,tahoma,arial,sans-serif;COLOR:#0033CC;} .contain span{ color: #00f; } .contain b{ color: #f00; } .contain div{ line-height: 150%; } .contain .code{border:1px solid #ccc;background-color:#f7f7f7;padding:3px 5px;} .contain table{font-weight:normal;} .contain .content table td{padding:3px;background-color:#fff;} .contain th{text-align:center;padding:3px;background-color:#ccc;} .contain #headerMain{ font:12px Verdana, Arial, sans-serif; border-bottom:1px dotted #00f; height:20px; } </style> <link type="text/css" href="lhgdialog.css" rel="stylesheet"/> <script type="text/javascript" src="lhgcore.min.js"></script> <script type="text/javascript" src="lhgdialog.js"></script> <script type="text/javascript"> J(function(){ J('#a').dialog({ title: '示例', cover: true, rang: true, resize: false, html: '<p>lhgdialog</p>' }); J('#b').dialog({ id: 'd1', title: '外部链接', page: 'http://www.baidu.com', link: true, btns: false, width: 700, height: 500 }); J('#c').dialog({ id: 'd2', title: '内部链接', page: '_content/01.html' }); J('#d').dialog({ id: 'd3', title: '随屏滚动', html: '<p align="center">lhgdialog</p>', fixed:true, top:'bottom', left:'right', width: 200, height: 100, btns: false }); J('#e').dialog({ id: 'd4', page: '_content/02.html' }); J('#f').dialog({ id: 'd5', page: '_content/03.html', cover: true }); J('#g').dialog({ id: 'd6', page: '_content/04.html' }); var resize = function() { J('#inp',dialog.dlg).click(function(){ dialog.reDialogSize( 300, 200 ); }); }; var dialog = J('#h').dialog({ id: 'd7', html: '<input id="inp" type="button" value="改变窗口大小"/>', cusfn: resize }); var dialog1 = J('#i').dialog({ id: 'd8', html: '<p>lhgdialog</p>', cusfn: function() { J('#xbtn',dialog1.dlg).click(function(){ alert( '此按钮的函数已被改变，不再关闭窗口了！' ); }); dialog1.addBtn( 'cancel', '取消', dialog1.cancel ); } }); ShowIt(); }); function ShowIt() { var h2 = J('h2'); for( var i = 0, l = h2.length; i < l; i++ ) { h2[i].cusIndex = i; J(h2[i]).bind( 'click', function(){ setTabs( this.cusIndex ); }); } } function setTabs(n) { var tab = J('.content'); for( var i = 0, l = tab.length; i < l; i++ ) tab[i].style.display = (i == n) ? '' : 'none'; } </script> </head> <body> <div class="contain"> <div id="headerMain"><strong>lhgcore Dialog Plugin v3.1.3 API说明文档</strong> <span style="color:#f00;font-size:11px;">Copyright lhgcore (c) 2010 All Rights Reserved</span></div> <h2>一、简介</h2> <div class="content"> <h3>1. 版本信息 </h3> <div>目前的版本是 3.1.3 发布于2010-06-12</div> <h3>2. 注意事项 </h3> <ul style="margin:0"> <li>lhgdialog目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名</li> <li>lhgcore.min.js文件为插件所用的库文件，此文件可放在其它任意目录里</li> <li>各目录及文件的用途：<br/> <span>lhgcore.min.js</span>：插件所用的库文件，此库的使用方法与jQuery差不多，可以说是个简化的jQuery，你可以在其它地方象使用jQuery一样使用它<br/> <span>lhgdialog.js</span>：插件的核心文件，使用插件时要引入此文件，<b>此文件是经过压缩的</b><br/> <span>lhgdialog.css</span>：插件的样式表文件，<b>此文件无需引入</b>，插件会自动加载此文件<br/> <span>目录images</span>：窗口插件所使用的图片的文件夹<br/> <span>index.html</span>：示例说明文件，使用中不需要此文件，<b>可删除</b><br/> <span>_lhgdialog.js</span>：插件的核心文件lhgdialog.js的未压缩的源文件，供大家学习使用的，<b>此文件是未经过压缩的，可删除</b><br/> <span>目录_content</span>：内容页示例文件夹，示例中所需的内容页示例文件都在此文件夹中，使用中不需要此文件夹，<b>可删除</b><br/> <span>目录_skins</span>：插件的的皮肤文件目录，插件共提供了5种皮肤，皮肤的使用方法请参考下面的<b>皮肤制作安装使用说明</b> </li> </ul> <h3>3. 支持的浏览器 </h3> <div>IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+</div> </div> <h2>二、如何使用</h2> <div class="content" style="display:none"> <h3>1. 引入插件的样式表文件 </h3> <div>使用lhgdialog弹出窗口插件要在<b>最顶层</b>的页面中引入<b>lhgdialog.css</b>，示例代码：<br/> <div class="code"> <head><br/>     <b><link type="text/css" href="lhgdialog.css" rel="stylesheet"/></b><br/>     <script type="text/javascript" src="lhgcore.min.js"></script><br/>     <script type="text/javascript" src="lhgdialog.js"></script><br/> </head> </div> </div> <div><b>注</b>：最顶层页面就是指：如果你使的插件要跨框架，窗口就会创建在整个框架的最顶层页面，所以lhgdialog.css样式表文件也要写在你整个框架的最顶层页面上</div> <h3>2. 插件所需文件的引入 </h3> <div>使用lhgdialog弹出窗口插件要在你使用此插件的页面中引入<b>lhgcore.min.js</b>和<b>lhgdialog.js</b>，示例代码：<br/> <div class="code"> <head><br/>     <script type="text/javascript" src="lhgcore.min.js"></script><br/>     <script type="text/javascript" src="lhgdialog.js"></script><br/> </head> </div> </div> <div><b>注</b>：lhgcore.min.js一定要在lhgdialog.js前引入</div> <h3>3. 插件的调用函数说明 </h3> <div>插件的调用函数有2种调用方法，分别用在不同的使用环境中<br/> <b>第一种为jQ方式调用方法，这种方法主要用在页面中只有一个或少数几个调用插件时，或不需要传参数时，形式如下：</b> <div class="code"> J(function(){<br/> {<br/>     J('#test').dialog({<br/>         title:'lhgdialog',<br/>         width:400,<br/>         height:300,<br/>         cover:true,<br/>         page:'samples.html'<br/>     });<br/> } </div> </div> <div> <b>第二种为普通函数式调用方法，这种方法主要用在页面中多个地方调用插件时，或需要传参数时，形式如下：</b> <div class="code"> function opdlg( args )<br/> {<br/>     var dlg = <b>new J.ui.dialog({ id: 'd1' .... });<br/>     dlg.ShowDialog();</b><br/> } </div> </div> <h3>4. 关于在frameset框架集中的使用 </h3> <div> 在html中没有任何元素可以浮动在 frameset框架之上的，如果你想要弹窗浮动在 frameset之上，你必须在 frameset 页面外层在加上 iframe 框架，<br/>

评论收藏

内容反馈