`
- 浏览:
165058 次
- 性别:
- 来自:
成都
-
<script type="text/javascript" language="javascript">
function sAlert(){
var str="test弹窗效果trybb.com";
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#c51100";//提示窗口的边框颜色
titlecolor="#c51100";//提示窗口的标题颜色
var sWidth,sHeight;
sWidth=screen.width;
sHeight=screen.height;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="关闭";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
}
</script>
HTML代码:
<input type="button" value="点击这里" onClick="sAlert();" />
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
JS+CSS 实现弹出居中背景半透明 div 层的方法 在 Web 开发中,弹出居中背景半透明 div 层是一种常见...本文介绍了如何使用 JS+CSS 实现弹出居中背景半透明 div 层的方法,希望对大家的 JavaScript 程序设计有所帮助。
这种效果通过创建一个覆盖整个页面的半透明div层来实现,使得弹出窗口成为焦点,而背景则变得相对较暗,从而引导用户的注意力。 首先,我们来看`div`标签。在HTML中,`<div>`(division)是一个通用的容器元素,...
总结,创建一个简单的JavaScript弹出窗口涉及HTML结构的构建、CSS样式的设定以及JavaScript事件处理的编写。通过合理组合这些元素,我们可以创建出既有视觉吸引力又具有良好交互性的弹出窗口。在这个案例中,"弹出...
JavaScript 弹出半透明窗口是网页交互中一种常见的设计手法,它可以在用户与网页交互时显示重要的信息或者提示,而不打断用户的浏览体验。通常,这种窗口具有较低的不透明度,使得用户可以看到背景页面的内容,但又...
这里帖出两种效果,第一种是弹出时页面背景直接变为半透明,而第二种则对XP关机效果仿得更像一点儿,即背景是有一个逐渐变为半透明的过程,大家可以留心观察两种效果的区别,两种效果全部通过了IE6和firefox的测试。
在本文中,我们将深入探讨如何利用JavaScript实现一个弹出div窗口,包括支持遮罩、拖动、嵌入页面和换肤等功能。 首先,让我们了解“弹出窗口”或“弹出层”的概念。在网页设计中,弹出窗口通常指的是不依赖浏览器...
这段代码会在ID为`dialog`的元素上创建一个模态对话框,背景变为半透明的灰色。 2. **Bootstrap Modal**:Bootstrap是另一个流行的前端框架,它也有模态对话框功能。同样,我们可以通过设置`data-backdrop`属性为`...
综上所述,"网页中弹出小窗口,页面背景逐渐变为半透明"这一效果的实现涉及HTML结构、CSS样式和JavaScript编程,以及用户体验和性能优化等多个方面。通过熟练掌握这些技术,可以创建更具吸引力和互动性的网页。
本案例集主要探讨如何利用"div"配合CSS(层叠样式表)和JavaScript来实现各种弹出窗口效果。这些效果对于网页交互性和用户体验至关重要,如消息提示、登录框、模态对话框等。 首先,我们来看"iframe的div遮罩层(可...
在网页设计和开发中,"js弹出div大集合"是一个重要的主题,它涉及到JavaScript、CSS和HTML等技术的综合运用。"div"是HTML中的一个块级元素,常用于组织网页布局,而"js"则指的是JavaScript,一种广泛使用的客户端...
"一个半透明效果的弹出框"是一种创新的UI设计技术,主要用于窗口或对话框的显示,为用户提供一种更加美观且不突兀的交互方式。本文将深入探讨这种半透明弹出框的设计原理、实现方法以及其在实际应用中的优势。 首先...
现在,当弹出窗口显示时,会有一个半透明的背景层覆盖整个页面,用户点击背景或关闭按钮都可以关闭弹出窗口。 总结一下,使用jQuery实现带透明度的弹出窗口涉及的主要知识点有:jQuery的选择器、事件绑定(`.click...
在JavaScript的世界里,"js划词弹出模态div特效"是一种常见的用户交互设计,它提高了网站的用户体验和互动性。这种技术的核心在于利用JavaScript监听用户的鼠标动作,当用户在网页上选择(划词)文本时,会触发一个...
- `<div id="ly" style="...">`:覆盖整个屏幕的半透明层,用来隔绝弹出层与页面其他部分的视觉干扰。 - `<div id="Layer2" align="center" style="...">`:实际显示内容的弹出层。 2. **JavaScript逻辑**: - `...
3. 弹出层显示时,通过JavaScript创建一个新的Div元素,设置其背景为半透明黑色,并将其放置在页面的最顶层,使得背景变为灰色且不可点击。 4. 当弹出层关闭时,移除这个灰色覆盖层,恢复背景的正常状态。 在这个...
这就是"Javascript实现弹出DIV层并锁屏"所涉及的主要内容。 首先,让我们了解一下什么是DIV。在HTML中,`<div>`元素是“division”的缩写,用于对网页内容进行区域划分。通过CSS样式,我们可以对这些DIV进行定位、...
这通常通过添加一个全屏的半透明`div`来实现,设置其层级低于弹出窗口,以便用户点击时无法操作背景。 4. **拖动功能**:为了让弹出窗口可拖动,需要监听鼠标的`mousedown`、`mousemove`和`mouseup`事件。当鼠标按...
【DIV模态窗口实现】是一种常见的前端网页设计技术,它允许在不离开当前页面的情况下,弹出一个窗口显示额外的信息或功能。模态窗口通常用于登录、注册、提示信息、表单提交等场景,能够提供良好的用户体验,因为它...
"带遮罩层的DIV窗口"是一种设计技巧,用于创建一种半透明的覆盖层,使得用户在与对话框交互时,无法访问背景内容。遮罩层通常是全屏的,并且其透明度可以调节,以达到理想的效果。实现方法是创建一个覆盖整个屏幕的...
模态对话框会在页面上覆盖一层半透明背景,使得用户必须与对话框交互后才能继续操作页面。 创建自定义模态对话框通常涉及以下步骤: 1. 创建HTML结构:包含对话框内容和遮罩层。 2. 应用CSS样式:设置对话框位置、...