第一种：弹出层、遮罩层、div层
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd
">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>JAVASCRIPT
弹出DIV层窗口实例</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style>
#popupcontent{ position: absolute; visibility: hidden; overflow: hidden; border:1px solid #CCC; background-color:#F9F9F9; border:1px solid #333; padding:5px;}
</style>
<script>
var baseText = null;
function showPopup(w,h){
var popUp = document.getElementById("popupcontent");
popUp.style.top = "200px";
popUp.style.left = "200px";
popUp.style.width = w + "px";
popUp.style.height = h + "px";
if (baseText == null) baseText = popUp.innerHTML;
popUp.innerHTML = baseText + "<div id=\"statusbar\"><input type=\"button\" value=\"Close window\" onClick=\"hidePopup();\"></div>";
var sbar = document.getElementById("statusbar");
sbar.style.marginTop = (parseInt(h)-60) + "px";
popUp.style.visibility = "visible";
}
function hidePopup(){
var popUp = document.getElementById("popupcontent");
popUp.style.visibility = "hidden";
}
</script>
<META content="MSHTML 6.00.2900.2838" name=GENERATOR></HEAD>
<BODY>
<div id="popupcontent">这是一个DIV弹窗效果!</div>
<p><a href="#" onmouseover="showPopup(300,200);" >将鼠标移动到此</a><p>
<p><a href="#" onclick="showPopup(300,200);" >点击这里查看弹出窗口</a></p>
</BODY>
</HTML>
第二种：弹出层、遮罩层、div层
<html>
<head>
<style>
<!--
body{font-family:宋体; font-size:12px; padding:0px; margin:0px;}
.showWindow:hover{color:#FF0000}
.win_bg{background:#CCC; opacity:0.2; filter:alpha(opacity=20); position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:998;}
.winTitle{background:#9DACBF; height:20px; line-height:20px}
.winTitle .title_left{font-weight:bold; color:#FFF; padding-left:5px; float:left}
.winTitle .title_right{float:right}
.winTitle .title_right a{color:#000; text-decoration:none}
.winTitle .title_right a:hover{text-decoration:underline; color:#FF0000}
.winContent{padding:5px;}
-->
</style>
<script language="javascript">
function showWindow(){
if(document.getElementById("divWin"))
{
$("divWin").style.zIndex=999;
$("divWin").style.display="";
}
else
{
var objWin=document.createElement("div");
objWin.id="divWin";
objWin.style.position="absolute";
objWin.style.width="520px";
objWin.style.height="220px";
objWin.style.border="2px solid #AEBBCA";
objWin.style.background="#FFF";
objWin.style.zIndex=999;
document.body.appendChild(objWin);
}
if(document.getElementById("win_bg"))
{
$("win_bg").style.zIndex=998;
$("win_bg").style.display="";
}
else
{
var obj_bg=document.createElement("div");
obj_bg.id="win_bg";
obj_bg.className="win_bg";
document.body.appendChild(obj_bg);
}
var str="";
str+='<div class="winTitle" onMouseDown="startMove(this,event)" onMouseUp="stopMove(this,event)"><span class="title_left">弹出式窗口</span><span class="title_right"><a href="javascript:closeWindow()" title="单击关闭此窗口">关闭</a></span><br style="clear:right"/></div>'; //标题栏
str+='<div class="winContent">这是一个页面内部弹出窗口，使用W3C的createElement()方法和appendChild()方法<br /> 用火狐打开可以拖动窗口(IE拖动可能有问题)</div>'; //窗口内容
$("divWin").innerHTML=str;
}
function closeWindow(){
$("divWin").style.display="none";
$("win_bg").style.display="none";
}
function $(o){
return document.getElementById(o);
}
function startMove(o,e){
var wb;
if(document.all && e.button==1) wb=true;
else if(e.button==0) wb=true;
if(wb)
{
var x_pos=parseInt(e.clientX-o.parentNode.offsetLeft);
var y_pos=parseInt(e.clientY-o.parentNode.offsetTop);
if(y_pos<=o.offsetHeight)
{
document.documentElement.onmousemove=function(mEvent)
{
var eEvent=(document.all)?event:mEvent;
o.parentNode.style.left=eEvent.clientX-x_pos+"px";
o.parentNode.style.top=eEvent.clientY-y_pos+"px";
}
}
}
}
function stopMove(o,e){
document.documentElement.onmousemove=null;
}
</script>
</head>
<body>
<a class="showWindow" href="javascript:showWindow()">点击这里</a>打开窗口<br />
</body>
</html>
第三种：弹出层、遮罩层、div层
自己下载个jquery.min.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javaScript" src="jquery.min.js"></script>
<script language="JavaScript">
function showWindow(){
mask=document.createElement("div");
var W=$(document).width();
var H=$(document).height();
mask.id="mask";
mask.style.cssText="position:absolute;z-index:5;width:"+W+"px;height:"+H+"px;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;";
document.body.appendChild(mask);
var o = document.getElementById("edit");
o.style.display="block";
o.style.top="253px";
o.style.left="400px";
}
</script>
</head>
<body>
<a href="javascript:showWindow()">点击</a>
<div id="edit" style="display:none;position:absolute;z-index:100; border:solid 1px #79BCFF; background-color: #EEF2FB; width:400px;height:100px">
<form name="form1" id="form1" method="post" action="admin.php?ac=adgroup&op=edit" onsubmit="">
<table id="table1" width="400" cellpadding="0" cellspacing="0">
<tr bgcolor="#A0D0F5">
<span style="float:right;margin-top:5px;"><a onclick="closeWindow();" style="cursor: pointer;float:right;">[关闭]</a></span>
<th colspan="2" style="font-size:14px;line-height:24px;">修改当前单元</th>
</tr>
<tr><td height="5"></td></tr>
<tr>
<td width="100" align="right">单元名称</td>
<td width="300"><INPUT TYPE="text" NAME="adgroupName" id="adgroupID" onblur="checkKeyName(this)"><div></div></td>
</tr>
<!--<tr>
<td align="right">出价</td>
<td><INPUT TYPE="text" NAME="MaxPriceName" id='MaxPriceID' onblur="checkPrice(this)"><div></div></td>
</tr>-->
<tr><td> </td></tr>
<tr>
<td colspan="2"><input type="button" value="确认" onclick="up_adgroup()" style="margin-left:100px;"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
相关推荐
在网页设计和开发中，"js div层遮罩提示窗口效果"是一种常见的用户交互技术，它主要用于提供一种视觉上的反馈，使用户能够更好地理解和响应页面上的操作。这种效果通常是通过JavaScript，HTML和CSS来实现的，其中div...
在网页开发中，有时我们需要实现一个功能，即在iframe中打开一个新的弹出窗口，并且这个弹出窗口能够遮罩住其父级页面，提供一种更好的用户体验。标题"iframe弹出框遮罩父类页面"正是关于这个技术点的讨论。在描述中...
在"弹出Div锁定桌面.rar"中，你可能会看到如何创建一个带有全屏遮罩层的弹出层，这个弹出层会锁定在用户的桌面上，直到用户完成指定操作或关闭弹出层。实现这种效果通常需要JavaScript配合CSS来完成，例如使用`...
在JavaScript中，弹出层通常有以下几种实现方式： 1. **HTML与CSS基础**：首先，我们需要在HTML中定义一个隐藏的div，作为弹出层的容器。这个div可以包含需要显示的所有内容，如文本、图片、表单等。通过CSS设置其...
一个弹出层通常包含以下几个部分：背景遮罩层、内容容器、关闭按钮（可选）以及可能的其他辅助元素。以下是一个简单的HTML结构示例： ```html <div id="overlay" class="overlay"></div> <div id="popup" class=...
本篇文章将详细探讨在jQuery中实现弹出遮罩层的技术要点，通过几个实例来帮助初学者理解并掌握这一技能。 首先，我们需要了解遮罩层（Modal）的概念。遮罩层是一种常见的用户界面元素，它在网页上创建一个半透明或...
标题“jquery弹出层”暗示我们将会探讨的是如何使用jQuery来实现网页上的弹出层效果，这在网页设计中是非常常见的一种功能，用于显示警告、信息、确认对话框或者复杂的模态窗口。 首先，让我们理解什么是弹出层。弹...
在JavaScript编程中，"弹出层"通常指的是在网页中临时显示信息或进行交互的浮动窗口，例如模态对话框。这种效果可以用于提示用户、获取输入或者展示详细信息。"暂停实现"意味着我们希望在弹出层打开时，阻止用户与...
创建js透明弹出层主要涉及以下几个知识点： 1. **DOM操作**：JavaScript通过Document Object Model（DOM）来操作HTML元素。要实现弹出层，首先需要在HTML中添加一个隐藏的弹出层元素，如`<div id="popup"></div>`，...
在讨论如何使用JavaScript弹出div并显示遮罩层之前，我们首先要理解几个核心概念：遮罩层的作用、如何使用JavaScript创建和控制DOM元素以及如何处理用户交互事件。 遮罩层通常被用于遮挡页面的一部分内容，从而达到...
在JavaScript中，通过改变CSS样式，我们可以使一个div元素从页面背景中突出显示，形成一种弹出的效果。这种方式相对于浏览器内置的alert()、prompt()和confirm()函数，提供了更高的自定义性和灵活性，我们可以控制弹...
在网页设计中，弹出层（也称为模态窗口或对话框）是一种常见的交互元素，用于展示重要信息或用户需要确认的操作。本示例主要探讨如何利用jQuery和CSS3技术来实现灵活且具有动画效果的弹出层。下面将详细阐述实现这个...
jQuery简洁遮罩弹出层代码是网页开发中常用的一种交互设计技术，主要用于创建弹出式窗口，例如对话框、提示信息或表单填写界面。它利用JavaScript库jQuery的强大功能，结合CSS来实现页面上的动态效果。在这个案例中...
弹出层（也称为对话框或模态窗口）通常会遮罩页面背景，使得用户只能与弹出层交互，直到完成操作或关闭弹出层。在本案例中，我们关注的是如何使用 CSS 和 div 元素来创建美观且功能齐全的弹出层和遮蔽层。 首先，`...
标题中的“JQuery+DIV+CSS在本页面弹出遮罩层，如弹出的登录小窗口”涉及到了网页交互设计中的几个关键元素和技术。首先，JQuery是一种广泛使用的JavaScript库，它简化了JavaScript的DOM操作，事件处理，动画效果...
jQuery弹出层通常用于实现以下几种功能： 1. **信息提示**：显示警告、确认或成功消息。 2. **表单验证**：在用户输入数据时提供实时反馈。 3. **模态对话框**：阻止用户在处理重要操作前与页面其他部分交互。 4. **...
在现代网页设计中，半透明遮罩层弹框效果是一种非常常见的交互方式，它不仅可以提升用户体验，还能让页面更加美观。通过JavaScript与HTML5的结合使用，我们可以轻松地实现这一效果。 #### 二、技术背景 在开始之前...
综上所述，这个示例代码提供了一种实现JavaScript弹出层并实现拖动和跨浏览器兼容性的方法。开发者可以通过这个基础框架，根据实际项目需求进行扩展和定制，比如添加动画效果、自定义关闭按钮、嵌入特定内容等功能。
以下我们将通过几个关键步骤来构建一个基本的jQuery弹出层。 1. **HTML结构**：首先，我们需要创建弹出层的基础HTML结构。弹出层通常包含一个容器元素，用于包裹所有内容，以及一个可选的遮罩层，用于半透明覆盖...
PopupDiv 插件利用jQuery的强大功能，简化了弹出层的创建和管理过程，避免了开发者手动编写复杂的CSS和JavaScript代码。 该插件的核心功能可能包括以下几点： 1. **多类型弹出**：PopupDiv 可能支持多种弹出层类型...