`
tanglong8848
  • 浏览: 71222 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

透明层遮罩

 
阅读更多

<!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=gb2312" />
<title>无标题文档</title>
<style>
body{margin:0;padding:0;}
#topFill{display:none;text-align:center;position:absolute;z-index = 999;filter:alpha(opacity=50);background-color:#eee;opacity: 0.5;-moz-opacity: 0.5;width:100%;}
#alertBox{margin:auto;height:150px;width:300px;background-color:#cf0;text-align:left;border:1px solid #666}
#alertTitle{height:20px;background-color:#EDF8B8;line-height:20px;padding:0 10px;border-bottom:1px solid #71860D}
#alertContent{padding:42px 0;;text-align:center;}
#alertBtn{text-align:center;}
#alertBtn input{margin:0 10px;background:#FFFF99;border:1px solid #fff;height:20px;line-height:20px;}
</style>
<script type="text/javascript" >
//document.documentElement.clientHeight+'px'
// onload的时候声明对象

var obj = new Object;
function oload(){
obj = document.getElementById('topFill');
obj.style.display = 'none';
}
var ss;
function cl(){
ss=document.getElementById('textaaa').value;
document.body.style.overflow = 'hidden';
document.body.style.height = document.documentElement.clientHeight + 'px';
obj.style.display = 'block';
obj.style.height = document.documentElement.clientHeight + 'px';
}


function bcl(){
document.body.style.overflow = '';
obj.style.display = 'none';
}
function oresize(){
if(obj.style.display != 'block'){

}else{
cl();
}
}
function isno(str){
if (str == 'yes'){
window.close();
}else {

bcl();

}
}

</script>
</head>
<body onload="oload()" onresize="oresize()">
<div id="topFill">
<h1>呵呵呵呵</h1>
<p>呵呵呵呵</p>
<h1>呵呵呵呵</h1>
<h1>呵呵呵呵</h1>
<h1>呵呵呵呵</h1>
<h1>呵呵呵呵</h1>
<h1>呵呵呵呵</h1>
<div id="alertBox">
<div id="alertTitle">警告!</div>
<div id="alertContent">你确定要退出吗?</div>
<div id="alertBtn">
<input type="button" value="是(Y)" onclick="isno('yes')" />
<input type="button" value="否(N)" onclick="isno('no')" />
</div>
</div>
<h1>呵呵阿呵呵</h1>
<h1>呵呵阿呵呵</h1>
<h1>呵呵阿呵呵</h1>
<h1>呵呵阿呵呵</h1>
</div>
<input type="text" id="textaaa" name="ts" value="test"/>
<input type="button" value="点我" onclick="cl(textaaa.value)"/>
</body>
</html>

分享到:
评论

相关推荐

    C# 自定义半透明遮罩层

    在C#编程中,创建一个自定义的半透明遮罩层是常见的需求,尤其是在开发桌面应用或者游戏界面时,为了实现部分区域的视觉隔离或加载等待效果。本教程将介绍如何利用C#来构建这样的功能。 首先,我们需要理解遮罩层的...

    Winform半透明遮罩层

    在Windows Forms(Winform)开发中,创建半透明遮罩层是一种常见的需求,它用于提供一种视觉效果,比如在后台操作进行时提示用户或者隐藏部分界面。本篇将深入探讨如何实现这样的效果,主要涉及半透明、遮罩层以及...

    JQuery遮罩层登录界面源码

    点击登录显示登录窗口(层) ,同时用一个灰色透明层遮罩主窗体内容,点击【登录】,隐藏【登录】,显示loading图,登录失败,显示【登录】,隐藏登录图,同时显示提示信息。 开发工具:Visual Studio 2010 无...

    自定义半透明遮罩层-源码

    在IT行业中,自定义半透明遮罩层是一个常见的前端开发任务,它主要用于创建一个覆盖在网页元素上方的半透明黑屏或灰屏效果,通常用于弹窗、加载提示或者阻止用户与页面其他部分的交互。这个"自定义半透明遮罩层-源码...

    C#自定义半透明遮罩层源码

    在Windows Forms应用开发中,有时候我们需要为用户界面添加一种半透明的遮罩层,以达到某种视觉效果,比如加载等待、提示信息等。标题提到的"C#自定义半透明遮罩层源码"正是针对这一需求提供的解决方案。下面将详细...

    JQuery遮罩层登录界面 2.0.rar

    二、功能介绍 点击登录显示登录窗口(层) ,同时用一个灰色透明层遮罩主窗体内容,点击【登录】,隐藏【登录】,显示loading图,登录失败,显示【登录】,隐藏登录图,同时显示提示信息。三、注意事项 1、管理员...

    WinForm控件半透明遮罩dll

    可在目标控件上显示或隐藏半透明遮罩层,支持透明度和颜色自定义,支持在遮罩层上显示自定义文本,文本颜色可调。已封装有x86/x64/AnyCpu三种dll,使用时引用相应的dll调用相关方法即可,方法参数说明已以截图形式放...

    自定义半透明遮罩层

    在网页设计和开发中,自定义半透明遮罩层是一种常见的视觉效果,它通常用于创建交互式的用户体验,比如加载提示、弹出窗口或模态框背景。遮罩层可以覆盖整个页面或者特定区域,通过半透明黑色或灰色背景,使用户聚焦...

    winform自定义半透明遮罩层-源码.rar

    本项目"winform自定义半透明遮罩层-源码.rar"提供了一种实现这种效果的方法,特别关注了自定义性和半透明特性。下面将详细讲解如何在C#环境下创建这样的遮罩层。 首先,了解遮罩层的基本概念。遮罩层通常是一个全屏...

    javascript 弹出遮罩层,弹出半透明的遮罩层并显示注册文本框内容

    javascript 弹出遮罩层,弹出半透明的遮罩层并显示注册文本框内容,让网页更生动

    遮罩窗口 - 给窗口增加半透明模糊遮罩

    这个技术通常用于创建一个在主窗口之上显示的半透明、模糊的覆盖层,它能够吸引用户的注意力或者在执行某些操作时提供反馈。 首先,我们需要了解"遮罩窗口"的概念。遮罩窗口是一种特殊的窗口,它的主要功能是在不...

    js+html5实现半透明遮罩层弹框效果

    遮罩层弹框是前端开发中常见的交互效果,它通常用于在用户进行某些操作时,显示在页面上层的半透明遮罩,以提示用户当前状态或者用于表单提交等场景。 知识点1:HTML5中实现遮罩层弹框的结构 在HTML5中,我们通常...

    WPF弹出半透明遮罩

    在Windows Presentation Foundation(WPF)中,创建一个半透明的弹出遮罩是常见的需求,尤其是在设计用户界面时,为了提供更好的用户体验,我们可能需要在主窗口上显示一个半透明的覆盖层,以突出显示某些内容或者...

    flash半透明遮罩

    遮罩层应该含有半透明或全透明的图形,通常是黑色或灰色渐变,其中黑色代表完全透明,白色代表完全不透明,灰色则介于两者之间。 2. **设置遮罩**:选中遮罩层,然后在Flash的时间轴面板中,点击图层右上角的锁定...

    QT实现半透明遮罩Demo

    而“半透明”遮罩则是遮罩层具有一定的透明度,允许用户透过遮罩看到部分底层内容,这样既能吸引用户的注意力,又不会完全阻断交互。 在QT中实现半透明遮罩,主要涉及以下几个关键知识点: 1. **QWidget与...

    css3半透明遮罩背景lightbox图片展示特效

    Lightbox是一种流行的设计模式,当用户点击图片预览链接时,会在当前页面上弹出一个全屏或半屏的图片视图,同时提供一个半透明的遮罩层,以增强用户体验。 一、CSS3半透明遮罩 半透明遮罩可以通过设置`opacity`属性...

    js+html5实现半透明遮罩层弹框效果.docx

    在现代网页设计中,半透明遮罩层弹框效果是一种非常常见的交互方式,它不仅可以提升用户体验,还能让页面更加美观。通过JavaScript与HTML5的结合使用,我们可以轻松地实现这一效果。 #### 二、技术背景 在开始之前...

    HTML5+CSS3 制作的图片半透明遮罩效果

    1. **伪元素**:我们可以利用`::before`或`::after`伪元素在图像上方添加一层半透明的颜色。例如: ```css .image-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; ...

    遮罩层弹出半透明dialog

    遮罩层弹出半透明dialog,很fashion。

    [Android][半透明遮罩]

    在Android开发中,半透明遮罩是一种常见的设计元素,它常用于实现如加载动画、弹出框、悬浮按钮等交互效果。半透明遮罩能够提供一种视觉上的过渡,让用户知道某些操作正在进行或者某些内容被隐藏。本文将深入探讨...

Global site tag (gtag.js) - Google Analytics