<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹出页面</title>
<script language="javascript" type="text/javascript">
Shade=new function()
{
var handle={};
var shade;
handle.show=function()
{
if(!shade)
{
shade=document.createElement('div');
shade.className='tb-shade';
document.body.appendChild(shade);
}
with((document.compatMode=='CSS1Compat')?document.documentElement:document.body)
{
var ch=clientHeight,sh=scrollHeight;
shade.style.height=(sh>ch?sh:ch)+'px';
shade.style.width=offsetWidth+'px';
shade.style.display='block';
}
};
handle.hide=function()
{
shade.style.display='none';
};
return handle;
}
function showPanel()
{
Shade.show();
document.getElementById('Panel').style.display='block';
document.getElementById('frame').src='http://www.163.com';
document.getElementById('Panel').scrollIntoView();
}
function hidePanel()
{
Shade.hide();
document.getElementById('Panel').style.display='none';
}
</script>
<style>
.tb-shade {
display: none;
z-index: 2007;
filter: alpha(opacity = 60);
left: 0px;
width: 100%;
position: absolute;
top: 0px;
background-color: #000000;
opacity: .6;
}
#Panel {
margin-top: -260px;
display: none;
z-index: 2008;
left: 50%;
margin-left: -325px;
width: 650px;
position: absolute;
top: 50%;
background-color: #FFFFFF
}
</style>
</head>
<body>
<div id="Panel" style="display: none;">
<a style="display: block; float: right;" onclick="hidePanel();"
href="#">【关闭】</a>
<iframe id="frame" style="overflow-X: hidden;" src="about:blank"
frameborder="0" width="650" height="500" scrolling="yes"></iframe>
</div>
<a href="#" onclick="showPanel();return false;"><strong>代码测试</strong>
</a>
</body>
</html>
分享到:
相关推荐
"登陆弹出页面 背景变暗"是一种常见且流行的技术,它会在弹出登录框时将页面背景淡化,使得登录窗口更加突出,增加视觉效果,同时也提高了操作的便捷性。 实现这个效果通常涉及到HTML、CSS和JavaScript这三种核心...
在网页设计中,"div+css实现弹出窗口背景变暗效果"是一种常见的交互设计手法,主要用于提升用户体验,特别是当用户需要关注特定弹出信息时。这种效果通过创建一个覆盖整个页面的半透明div层来实现,使得弹出窗口成为...
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
综上所述,"弹出登录页面,背景变暗"的设计方法在提升用户体验、引导用户关注当前任务方面具有显著优势。通过合理运用HTML、CSS和JavaScript,开发者可以轻松实现这一功能,为网站或应用增添专业且友好的交互体验。
在网页设计中,为了提升用户体验,常常会在用户查看图片时将背景淡化,以此来突出显示当前的图片。这种效果在很多网站的图片浏览器或者相册功能中非常常见,它能够帮助用户集中注意力在正在查看的图片上。"jQuery ...
在JavaScript(JS)中,实现背景变暗的效果通常涉及到对网页元素的CSS样式操作,特别是调整元素的透明度或混合模式。这个效果可以用于创建视觉焦点或者为用户提供一种交互体验,比如在弹出窗口出现时暗化背景。下面...
"弹出提示框,背景压暗蒙版"是一种常见的UI设计手法,它用于吸引用户的注意力并提供一个临时的信息展示空间,同时保持对当前操作环境的感知。在这个场景中,"弹出提示框"是指在用户界面中突然出现的、包含特定信息或...
本文将深入探讨如何使用jQuery实现一个对话框效果,即在弹出对话框时,背景变暗并且用户无法操作背景内容,以提供更好的用户体验。 首先,要实现这种效果,我们需要引入jQuery库到我们的HTML文件中。可以使用CDN...
这种设计可以使其他元素变暗,突出显示当前的提示窗口,使得用户更加专注于当前的任务。下面我们将详细探讨这个主题涉及的技术知识点。 首先,我们需要理解HTML、CSS和JavaScript在这其中的角色。`背景变暗的div`...
在网页设计和用户体验领域,"鼠标悬停变暗突出显示特效"是一种常见的交互设计手法,它增强了用户与页面元素的互动性。这种特效通常应用于链接、按钮或图像等元素上,当用户将鼠标指针悬停在这些元素上时,周围的背景...
本主题围绕“暗红色背景网页模板”,深入探讨暗色调网页设计的特点、应用场合以及如何利用这类模板进行企业网站的构建。 暗红色背景在网页设计中是一种独特的选择,它融合了红色的热情与暗色调的低调奢华,为网页...
这个场景描述的是一个交互式的设计元素,当用户在网页上拖动某个div时,会有一个弹出的div出现,并且整个背景会变暗,这种效果通常用于创建对话框或者模态窗口,为用户提供一个突出的视觉焦点。 实现这个功能主要...
在设计中使用暗橙色,既能突出主题,又能营造出温馨而引人入胜的氛围,适合用来吸引目标受众的注意力。 文件列表中的“README.md”通常是一个文本文件,包含有关模板的说明、使用指南或版权信息。用户在使用模板...
登录页面是用户首次接触应用程序的重要界面,而自动切换背景图的功能可以为用户提供更生动、更具吸引力的用户体验。本文将深入探讨如何实现登录页面背景图片的自动切换,涉及的技术包括前端开发、CSS3动画、...
这种技巧通常用于弹窗或者模态对话框,当用户点击弹出窗口时,背景页面会变暗并且变为不可交互状态,以确保用户专注于当前打开的弹出内容,防止意外点击到背景元素。 在描述中提到的"NULL 博文链接:...
在这个例子中,我们改变了背景颜色和文本颜色,使当前页面的链接在导航菜单中更加醒目。 总结一下,通过结合JavaScript(jQuery)和CSS,我们可以轻松地在Z-Blog中实现导航菜单突出显示当前页面链接的功能。...
html引导页导航网站旋转头像变幻背景单页源码html引导页导航网站旋转头像变幻背景单页源码html引导页导航网站旋转头像变幻背景单页源码html引导页导航网站旋转头像变幻背景单页源码html引导页导航网站旋转头像变幻...
网上有很多popUpWindow变暗的操作,但是很多都不符合要求或者根本无效,所以自己写了一个操作并且尝试成功,思想和代码都很简单,替换掉xxx可以直接使用
将这些背景值设置为透明,有助于突出显示具有实际意义的图像信息。 **方法一:手动修改HDR头文件** 1. 使用文本编辑器(如记事本)打开与图像文件对应的*.hdr头文件。HDR文件包含了图像的元数据,包括图像的大小、...
当前版本:1.2.6 软件语言:中文 软件类别:特效相机 软件大小:7.13 MB 适用固件:4.2及更高固件 内置广告:没有广告 适用平台:Android 背景散焦 - 以专业方式拍照 突出对焦的物件。背景散焦应用程序可透过建立一...