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

浮动窗口的实现

    博客分类:
  • JS
阅读更多
<!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>loading demo</title>
<script type="text/javascript">
function show(){
var loadbox =document.getElementById("loadlayer");
var overlayer = document.getElementById("overlayer");
loadbox.style.display = "block" ;
overlayer.style.display = "block" ;
}

function hide(){
var loadbox =document.getElementById("loadlayer");
var overlayer = document.getElementById("overlayer");
loadbox.style.display = "none" ;
overlayer.style.display = "none" ;
}
</script>

<style type="text/css">
#overlayer{
position: absolute;
top: 25%;
left: 25%;
z-index: 90;
width: 50%;
height: 50%;
background-color: #000;
filter:alpha(opacity=60);
-moz-opacity: 0.5;
opacity: 0.5;
display:none;
}

#loadbox{
position: absolute;
top: 45%;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
}

#loadlayer{
display:none;
}

</style>
</head>
<body>
<div id="overlayer"></div>
<div id="loadbox" >
  <div id="loadlayer">
      <input type="text" value="" />
      <input type="password" value=""/>
      <input type="submit" value="Login">
    </div>
</div>
  <div id="containlayer">
     <input type="button" value="Login" onclick="show()" />
        <input type="button" value="Cancel" onclick="hide()"/>
        <br />
        <br />
        <p>
   dddddddddddddddddddddddddddddddddddddddddddddddd
   dddddddddddddddddddddddddddddddddddddddddddddddd
   dddddddddddddddddddddddddddddddddddddddddddddddd
   dddddddddddddddddddddddddddddddddddddddddddddddd
   dddddddddddddddddddddddddddddddddddddddddddddddd
   dddddddddddddddddddddddddddddddddddddddddddddddd
   dddddddddddddddddddddddddddddddddddddddddddddddd
   dddddddddddddddddddddddddddddddddddddddddddddddd
     </p>
  </div>
</body>
</html>

 

分享到:
评论

相关推荐

    安卓 Android PopupWindow浮动窗口实现实例.rar

    安卓 Android PopupWindow浮动窗口实现实例,或者说是弹出窗口吧,总之就是地一类,在打开应用后,显示在最上层的一个浮动窗口效果,Andorid弹出窗口,Google为Andorid预置了几款默认的弹出窗口效果,本源码教你如何...

    android浮动窗口实现级点击消失例子

    在Android开发中,浮动窗口(通常称为悬浮窗或者小部件)是一种常见的功能,它可以在主屏幕或其他应用之上显示内容,为用户提供便捷的操作或...通过学习和运行这个例子,你将更深入地理解Android中浮动窗口的实现方式。

    android桌面浮动窗口实现

    在Android系统中,实现桌面浮动窗口(也称为悬浮窗或小部件)的技术主要涉及到权限申请、自定义ViewGroup以及窗口管理器(WindowManager)的使用。以下是对这一主题的详细阐述: 首先,为了在Android应用中创建浮动...

    mfc浮动窗口--类似迅雷半透明的浮动窗口

    3. **浮动窗口实现**:创建浮动窗口首先需要在程序中定义一个窗口类,然后注册窗口类,接着创建窗口实例并显示。关键步骤包括`Create`函数的调用,用于创建窗口,以及`ShowWindow`来控制窗口的可见性。 4. **半透明...

    html可以移动的浮动窗口

    不过,我可以提供一个基本的浮动窗口实现示例: ```html &lt;!DOCTYPE html&gt; .float-window { position: absolute; width: 200px; height: 100px; background-color: #f0f0f0; border: 1px solid #ccc; ...

    activity实现dialog 浮动窗口实现弹出菜单

    activity设置成dialog 浮动窗口,样式,可以实现弹出菜单,可以完成dialog无法实现的功能,参:考activity实现弹出菜单,仿网易云音乐侧滑菜单 - xiaobijia的专栏 - 博客频道 - CSDN.NET ...

    Android浮动窗口实现原理及代码实例

    1.浮动窗口的实现原理 看到上图的那个小Android图标了吧,它不会被其他组建遮挡,也可以...2.浮动窗口实现的具体步骤 1)既然浮动窗口的实现依赖与WindowManager,那么毫无疑问,我们得先拿到WindowManger对象。考

    jQuery之浮动窗口实现代码(两种方法)

    &lt;head&gt;...浮动窗口&lt;/title&gt; &lt;link type=”text/css” rel=”stylesheet” href=”css/overflow.css” /&gt; [removed][removed] [removed][removed] [removed] $(document).ready(func

    桌面浮动图标弹出窗口360效果

    【描述】:描述中提到,现有的网络资源提供的浮动窗口实现可能较为基础,无法满足某些特定需求。经过一天的努力,实现了更加贴近期望的、具有弹出动画的360效果。这表明这个项目不仅包含了浮动窗口的基本功能,还...

    Pennywise一个跨平台程序用于在浮动窗口中打开任何内容

    通过查看这些源代码,开发者可以学习到Pennywise的实现细节,包括如何处理浮动窗口、事件监听、内容加载以及与操作系统交互等方面的知识。对于希望深入了解跨平台应用开发或者JavaScript高级用法的开发者来说,这是...

    VC实现浮动窗口

    VC6实现浮动窗口,类似FlashGet.

    Android高级应用源码-浮动窗口播放器.zip

    总的来说,这个"Android高级应用源码-浮动窗口播放器.zip"项目涉及了Android应用开发中的多个重要技术,包括浮动窗口实现、媒体播放、屏幕适配、生命周期管理和服务使用等,对于想要深入学习Android高级特性的开发者...

    浮动窗口代码及实例

    本教程将详细介绍如何通过继承`CControlBar`类来实现一个具有四周停靠功能的浮动窗口。 `CControlBar`是MFC(Microsoft Foundation Classes)库中的一个基类,它提供了一种创建用户界面元素(如工具栏、状态栏等)...

    客服QQ浮动窗口

    在这个客服QQ浮动窗口的实现中,JavaScript负责处理浮动窗口的显示、隐藏、跟随滚动等功能。例如,可以使用JavaScript监听滚动事件,当用户滚动页面时,浮动窗口会保持在屏幕的固定位置,确保始终可见。同时,...

    浮动窗口制作资料、浮动窗口制作资料

    在Windows操作系统中,浮动窗口常常通过控件如ToolWindow或者MDI(多文档界面)实现。浮动窗口可以是应用程序的一部分,也可以是一个独立的小程序,如系统托盘图标弹出的提示窗口。在Android和iOS等移动平台上,浮动...

    jQuery页面右下角浮动窗口代码.zip

    《jQuery页面右下角浮动窗口实现详解》 在网页设计中,为了提升用户体验,有时我们需要在页面的右下角设置一个浮动窗口,用于显示通知、广告或者提供客服服务。jQuery作为一个强大的JavaScript库,提供了丰富的功能...

    VC编写的具有浮动窗口的例程

    接下来,我们要实现双击浮动窗口时隐藏和显示主窗口的功能。这涉及到消息处理和窗口事件的响应。在VC中,我们可以通过重载CWnd类的On_WM_LBUTTONDBLCLK()方法来捕获双击消息。在该方法内部,我们可以调用ShowWindow...

Global site tag (gtag.js) - Google Analytics