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

纯JS的弹出层

阅读更多
<script type="text/javascript" language="javascript">
function showdiv(){
var str="这里是内容";//by dcdc723 http://dcdc723.iteye.com 
var msgw,msgh,bordercolor;
msgw=400;//宽度
msgh=200;//高度
titleheight=25;
bordercolor="#c51100";//提示窗口的边框颜色
titlecolor="#c51100";//提示窗口的标题颜色
var sWidth,sHeight;
sWidth=screen.width-100;
sHeight=screen.height-200;
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 = "100";
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 = "40%";
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 = "101";
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>
<a onclick="javascript:showdiv();">测试</a>

 

分享到:
评论

相关推荐

    纯js弹出层layer跨Iframe完美回调

    在“纯js弹出层layer跨Iframe完美回调”的场景下,我们首先需要理解Iframe的基本概念。Iframe(Inline Frame)是HTML中的一种元素,允许在一个页面中嵌入另一个页面,实现内容的分隔和独立加载。然而,由于同源策略...

    纯js响应式模态窗口和弹出层插件MODALit

    MODALit是一款高效且实用的纯JavaScript响应式模态窗口和弹出层插件,其设计目标是为开发者提供一个轻量级、易用的解决方案,以创建lightbox效果、模态窗口、对话框以及各种弹出层。这款插件无需依赖jQuery库,但在...

    纯javascript弹出层+随页面滚动而滚动.html

    javascript 弹出层+随页面滚动而滚动.html 几行javascript代码解决弹出层,并且覆盖整个页面,随着页面流动还流动 ( 不用jQuery.js )

    js弹出窗口、弹出层

    实现弹出层的JavaScript库有很多,比如jQuery UI的Dialog、Bootstrap的Modal,以及纯JavaScript的SweetAlert2等。"FineMessBox"可能提供了一种更轻量级或特定需求的解决方案。 在实际项目中,我们需要根据需求来...

    js弹出层大集合里面有很多

    总的来说,JavaScript弹出层是一个广泛使用的功能,通过结合HTML、CSS和JavaScript,我们可以创建各种各样的弹出层效果,提高网页的互动性和用户体验。对于网页开发者来说,掌握弹出层的制作方法是必不可少的技能之...

    js 实现弹出层

    本文将深入探讨如何使用JavaScript来实现弹出层效果,包括各种不同的弹出层类型及其应用场景。 首先,我们需要了解弹出层的基本结构。一个弹出层通常包含以下几个部分:背景遮罩层、内容容器、关闭按钮(可选)以及...

    自定义js弹出窗口(弹出层)

    在网页开发中,自定义js弹出窗口,也被称为弹出层或对话框,是一种常见的交互设计技术。这种技术允许开发者在用户与页面交互时显示额外的信息或功能,而不会中断主页面的工作流程。在本教程中,我们将深入探讨如何...

    纯静态的弹出层

    在IT领域,特别是前端开发中,"纯静态的弹出层"是一种常见而又重要的设计元素。这个标题所指的是一种不依赖JavaScript或者其他动态脚本,甚至没有onmouse事件监听器的简单弹出层实现。这样的设计通常基于HTML和CSS,...

    js弹出层多样式。

    本文将深入探讨使用JavaScript(JS)和CSS来创建多样化弹出层的方法,以及如何通过CSS实现丰富的样式效果。 首先,让我们了解弹出层的基本原理。在HTML中,我们通常会创建一个隐藏的`div`元素,作为弹出层的基础...

    js实现的弹出层效果

    本篇将详细讲解如何使用纯JavaScript来创建一个弹出层效果,不依赖任何外部库如jQuery。 首先,我们需要理解弹出层的基本构成。弹出层通常包括一个背景遮罩和一个浮于其上的主要内容区域。主要内容区域可以是信息...

    几种网页弹出层的实例

    "AlertBox.rar"可能包含这样的实例,它展示了如何使用纯CSS或JavaScript库(如jQuery UI)创建没有遮罩层的弹出层。这种弹出层通常较小且不影响用户对页面其他元素的操作。 3. 动态弹出效果: 动态效果可以使用户...

    javaScript弹出层合集

    JavaScript弹出层合集是一个集合了多种样式和功能的弹出层实现,旨在解决JavaScript原生弹出层在视觉效果和可定制性上的不足。在网页设计和开发中,弹出层是一种常用的交互元素,用于显示额外信息、提示、确认对话框...

    js弹出框-弹出层-拖拽-兼容

    在这个"js弹出框-弹出层-拖拽-兼容"的插件中,开发者通过纯JavaScript实现了弹出层的创建、拖拽功能的添加,并优化了代码以适应多种浏览器环境。这个插件的价值在于它不需要依赖jQuery或其他大型库,降低了页面加载...

    [WEB开源]弹出层效果

    弹出层的实现方式多样,可以基于框架如jQuery UI、Bootstrap的弹窗插件,也可以使用纯JavaScript或Vue、React等现代前端框架自定义实现。其核心在于控制元素的显示和隐藏,以及调整其样式以达到理想的视觉效果。 **...

    一个简单好用的弹出层

    标题中的“一个简单好用的弹出层”指的是在网页前端开发中常见的一种交互元素,通常称为模态框(Modal)或对话框。这种组件在用户界面设计中扮演着重要角色,它能在用户与主页面交互的过程中临时显示额外信息、进行...

    纯js(javascript)弹出层 对话框,div 模拟系统对话框

    本篇文章将详细讲解如何使用纯JavaScript(无依赖库如jQuery等)来创建自定义的弹出层对话框,以及如何模拟系统级别的Alert、Confirm和Prompt对话框。 首先,我们来理解“弹出层”。弹出层,通常是一个浮现在页面...

    精美网页弹出层大全

    6. JS弹出层、弹出层、AlertBox、自己写的弹出层:这些都是不同类型的弹出层实现,可能涵盖基础的JavaScript实现到更复杂的功能,比如模拟系统的警告对话框(AlertBox)或者个人自定义的弹出层设计,具有个性化和可...

    层,弹出层,div,层布局

    例如,一个简单的JavaScript弹出层可能使用以下代码实现: ```html 打开弹出层 这是一个弹出层内容 关闭 #popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ...

    网页弹出层特效实例代码

    弹出层的实现方式多样,可以使用纯CSS、JavaScript库(如jQuery)或者现代前端框架(如React或Vue)。 在百度的弹出层特效中,可能包含了对动画效果、透明度控制、定位策略、关闭按钮以及用户交互响应的精细处理。...

    js或Jquery弹出层

    JavaScript 和 jQuery 是两种广泛用于网页开发...总的来说,无论是纯 JavaScript 还是结合 jQuery,创建弹出层都是网页开发中的基本技能之一。通过熟练掌握这些技术,开发者可以构建更加丰富和用户体验良好的网页应用。

Global site tag (gtag.js) - Google Analytics