`
EJB_wawa
  • 浏览: 108987 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

背景暗一点,突出当前页

    博客分类:
  • web
阅读更多
<%@ 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+css实现弹出窗口背景变暗效果"是一种常见的交互设计手法,主要用于提升用户体验,特别是当用户需要关注特定弹出信息时。这种效果通过创建一个覆盖整个页面的半透明div层来实现,使得弹出窗口成为...

    JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

    JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

    弹出登录页面,背景变暗

    综上所述,"弹出登录页面,背景变暗"的设计方法在提升用户体验、引导用户关注当前任务方面具有显著优势。通过合理运用HTML、CSS和JavaScript,开发者可以轻松实现这一功能,为网站或应用增添专业且友好的交互体验。

    jQuery 浏览图片,背景变暗

    在网页设计中,为了提升用户体验,常常会在用户查看图片时将背景淡化,以此来突出显示当前的图片。这种效果在很多网站的图片浏览器或者相册功能中非常常见,它能够帮助用户集中注意力在正在查看的图片上。"jQuery ...

    JS的背景变暗的代码

    在JavaScript(JS)中,实现背景变暗的效果通常涉及到对网页元素的CSS样式操作,特别是调整元素的透明度或混合模式。这个效果可以用于创建视觉焦点或者为用户提供一种交互体验,比如在弹出窗口出现时暗化背景。下面...

    弹出提示框,背景压暗蒙版

    "弹出提示框,背景压暗蒙版"是一种常见的UI设计手法,它用于吸引用户的注意力并提供一个临时的信息展示空间,同时保持对当前操作环境的感知。在这个场景中,"弹出提示框"是指在用户界面中突然出现的、包含特定信息或...

    JQuery实现对话框效果 即弹出对话框背景变暗且不可操作

    本文将深入探讨如何使用jQuery实现一个对话框效果,即在弹出对话框时,背景变暗并且用户无法操作背景内容,以提供更好的用户体验。 首先,要实现这种效果,我们需要引入jQuery库到我们的HTML文件中。可以使用CDN...

    背景变暗的div可拖动提示窗口.

    这种设计可以使其他元素变暗,突出显示当前的提示窗口,使得用户更加专注于当前的任务。下面我们将详细探讨这个主题涉及的技术知识点。 首先,我们需要理解HTML、CSS和JavaScript在这其中的角色。`背景变暗的div`...

    鼠标悬停变暗突出显示特效

    在网页设计和用户体验领域,"鼠标悬停变暗突出显示特效"是一种常见的交互设计手法,它增强了用户与页面元素的互动性。这种特效通常应用于链接、按钮或图像等元素上,当用户将鼠标指针悬停在这些元素上时,周围的背景...

    暗红色背景网页模板_暗红 红色 背景 企业 模板.zip

    本主题围绕“暗红色背景网页模板”,深入探讨暗色调网页设计的特点、应用场合以及如何利用这类模板进行企业网站的构建。 暗红色背景在网页设计中是一种独特的选择,它融合了红色的热情与暗色调的低调奢华,为网页...

    网页上div拖拽,弹出div背景变暗

    这个场景描述的是一个交互式的设计元素,当用户在网页上拖动某个div时,会有一个弹出的div出现,并且整个背景会变暗,这种效果通常用于创建对话框或者模态窗口,为用户提供一个突出的视觉焦点。 实现这个功能主要...

    夕阳背景旅游类模板-夕阳 背景 旅游 企业 暗橙.rar

    在设计中使用暗橙色,既能突出主题,又能营造出温馨而引人入胜的氛围,适合用来吸引目标受众的注意力。 文件列表中的“README.md”通常是一个文本文件,包含有关模板的说明、使用指南或版权信息。用户在使用模板...

    登录页面自动切换背景图

    登录页面是用户首次接触应用程序的重要界面,而自动切换背景图的功能可以为用户提供更生动、更具吸引力的用户体验。本文将深入探讨如何实现登录页面背景图片的自动切换,涉及的技术包括前端开发、CSS3动画、...

    点击弹出窗口网页背景变暗且不可点的效果(三):iframe实现

    这种技巧通常用于弹窗或者模态对话框,当用户点击弹出窗口时,背景页面会变暗并且变为不可交互状态,以确保用户专注于当前打开的弹出内容,防止意外点击到背景元素。 在描述中提到的"NULL 博文链接:...

    z-blog让导航突出显示当前页链接条目

    在这个例子中,我们改变了背景颜色和文本颜色,使当前页面的链接在导航菜单中更加醒目。 总结一下,通过结合JavaScript(jQuery)和CSS,我们可以轻松地在Z-Blog中实现导航菜单突出显示当前页面链接的功能。...

    html引导页导航网站旋转头像变幻背景单页源码html引导页导航网站旋转头像变幻背景单页源码

    html引导页导航网站旋转头像变幻背景单页源码html引导页导航网站旋转头像变幻背景单页源码html引导页导航网站旋转头像变幻背景单页源码html引导页导航网站旋转头像变幻背景单页源码html引导页导航网站旋转头像变幻...

    成功将popUpWindow背景变暗

    网上有很多popUpWindow变暗的操作,但是很多都不符合要求或者根本无效,所以自己写了一个操作并且尝试成功,思想和代码都很简单,替换掉xxx可以直接使用

    ENVI5.0忽略影像背景值

    将这些背景值设置为透明,有助于突出显示具有实际意义的图像信息。 **方法一:手动修改HDR头文件** 1. 使用文本编辑器(如记事本)打开与图像文件对应的*.hdr头文件。HDR文件包含了图像的元数据,包括图像的大小、...

    背景散焦 v1.2.6

    当前版本:1.2.6 软件语言:中文 软件类别:特效相机 软件大小:7.13 MB 适用固件:4.2及更高固件 内置广告:没有广告 适用平台:Android 背景散焦 - 以专业方式拍照 突出对焦的物件。背景散焦应用程序可透过建立一...

Global site tag (gtag.js) - Google Analytics