<html>
<head>
<link href="<%=jmfg%>/css/common.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>
<body class="rightbg" onresize="divcenter();" onscroll="divcenter();">
<input type="button" value="点击这里" onclick="divcenter('js弹窗效果');"/>
</body>
<script type="text/javascript" language="javascript">
function divcenter(sStr)
{
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=sStr;
document.getElementById("msgDiv").appendChild(txt);
}
</script>
</html>
分享到：
相关推荐
本次探讨的主题聚焦于“js 创建div层”，这不仅是一种基本的网页操作技能，也是实现网页动态效果、交互设计的基础。以下将从创建div层的方法、应用场景以及相关代码解析等方面进行详细介绍。 ### 一、创建div层的...
以上代码提供了一个基础的框架，通过修改和扩展，可以满足各种复杂的动态创建div层的需求。记得在实际应用中，将CSS和JavaScript代码分别放在相应的.css和.js文件中，并确保正确引入到HTML文档中。
原生JS动态创建div的实例,超简单.不喜欢冗余代码的同学,建议可以看看
在本实例中，我们将深入探讨如何使用JavaScript来创建一个弹出DIV层窗口。 首先，我们需要了解HTML结构。`index.htm`和`test.html`文件可能包含了用于展示弹出窗口的基础HTML元素。通常，一个基本的HTML结构会包括...
“JS版DIV层”意味着所有的操作都是通过JavaScript实现的，而不是依赖于其他服务器端技术，这样可以实现动态效果，提高网页的交互性。“DIV JS库”是对整个工具的概括，是一个基于JavaScript的，专门处理DIV元素的库...
标题中的“点击后可以展示到前端的div层jquery效果”是指一种常见的网页交互设计，它利用JavaScript库jQuery来实现一个功能：当用户点击某个元素（如按钮）时，页面上的一个或多个div层（通常用于创建弹出框、提示...
#### 二、如何创建一个简单的DIV遮罩层？ 1. **HTML结构**：首先，在HTML文档中添加一个`<div>`元素作为遮罩层的基础，可以为其分配一个唯一的ID以便于后续的CSS和JS操作。 ```html <div id="mask"></div> ``` ...
1. **创建div层** 在HTML中，我们首先需要定义一个div元素作为弹出层的基础结构。这个div通常会设置为隐藏，然后通过JavaScript来控制其显示和隐藏。例如： ```html <div id="popupLayer" style="display:none;...
本教程将详细介绍如何使用JavaScript创建一个自定义的div层来模拟alert对话框，并解决在iframe中使用的兼容性问题。 首先，我们需要创建一个HTML结构来模拟alert对话框。这个结构通常包含一个可关闭的按钮和用户...
在本案例中，"js鼠标浮动显示div"指的是当鼠标移动到特定的input元素上时，会显示出一个div层，该div层中包含有与input相关的附加信息或者功能。 首先，我们需要了解几个关键的概念： 1. **事件监听器**：...
在JavaScript中，弹出div层并实现锁屏功能是一项常见的前端交互设计，它通常用于创建模态对话框、警告提示或者加载等待效果。这个过程涉及到DOM操作、CSS样式控制以及JavaScript事件处理。下面我们将深入探讨如何...
JS+CSS 实现弹出居中背景半透明 div 层的方法 在 Web 开发中，弹出居中背景半透明 div 层是一种常见...本文介绍了如何使用 JS+CSS 实现弹出居中背景半透明 div 层的方法，希望对大家的 JavaScript 程序设计有所帮助。
CSS+JS 实现 DIV 层的展开折叠效果 本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式，用户可以点击按钮来展开或折叠内容。 HTML 结构 首先，我们需要...
本主题将详细讲解如何使用JavaScript创建一个可移动的`div`层来模拟`alert`功能，并在`iframe`环境中应用。 首先，让我们了解`alert`的基本用法。`alert`是JavaScript内置的一个全局函数，用于显示一个包含指定消息...
本文将详细讲解如何利用JavaScript实现div层的拖拽功能，并结合相关标签"js"、"拖拽"和"div层"进行深入讨论。 首先，我们需要创建一个可拖动的div元素。在HTML中，可以这样定义： ```html <div id="draggable" ...
在网页设计和开发中，"js div层遮罩提示窗口效果"是一种常见的用户交互技术，它主要用于提供一种视觉上的反馈，使用户能够更好地理解和响应页面上的操作。这种效果通常是通过JavaScript，HTML和CSS来实现的，其中div...
在"JS做的隐藏与显示DIV可拖动弹出层"这个实例中，我们将探讨如何利用JavaScript来创建一个可拖动的弹出层，并控制其显示与隐藏。 首先，让我们理解`div`层的隐藏与显示。在HTML中，我们创建一个`div`元素并为其...
1. **使用 Div 实现**：创建一个全屏覆盖的黑色半透明 Div 作为遮罩层，设置 `z-index` 属性确保遮罩层位于其他元素之上。 2. **使用 Iframe 实现**：如果需要支持跨域内容的加载，可以使用 Iframe 来构建遮罩层。...
本篇将深入讲解如何利用jQuery实现div层的自由拖动以及尺寸调整功能，这对于创建楼宇平面图布局等场景尤为实用。 首先，我们需要引入jQuery库。在`index.html`文件中，添加以下代码来引入jQuery： ```html <!...
在这个"两个js弹出div层并获取当前页面值的html例子"中，我们可以学习如何利用JavaScript动态创建和控制div元素来实现弹出层，并且获取当前页面的值。 首先，我们先理解HTML中的div元素。div是HTML中的一个块级元素...