`

js控制div弹层、遮罩《转》

htmljavascript 
阅读更多 
<!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 />&nbsp;&nbsp;用火狐打开可以拖动窗口(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>&nbsp;&nbsp;&nbsp;</td></tr>
        <tr>
            <td colspan="2"><input type="button" value="确认" onclick="up_adgroup()" style="margin-left:100px;"></td>
        </tr>
      </table>

  </form>
</div> 
</body>
</html>

 

                         我就是悄么悄的从这儿转的： http://hi.baidu.com/zone_dubai/item/fda36bbb330814b5eaba9343

分享到：
| 下一代Jquery模板-----JsRender 《转》
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    解决layer弹层遮罩挡住窗体的问题

    然而，在实际使用过程中，可能会遇到弹层遮罩层（shade）意外地遮挡了弹窗内容的问题，这会影响用户的交互体验。本文将详细解析这个问题并提供解决方案。 问题描述： 当使用layer弹层组件时，如果弹出的窗口内容...

    div_css_js弹出层有遮罩

    在网页设计中，"div_css_js弹出层有遮罩"是一个常见的交互设计技术，用于创建弹出式窗口或对话框，通常用于显示通知、表单、广告等。这一技术结合了HTML的`&lt;div&gt;`元素、CSS样式以及JavaScript/jQuery的动态效果，以...

    js 页面弹层置灰加载

    在JavaScript（JS）编程中，"页面弹层置灰加载"是一种常见的用户体验设计，它用于在用户触发某个操作，如点击事件，时显示一个半透明的遮罩层，同时显示一个加载图标，告知用户系统正在进行后台处理。这种设计能够...

    java开发常用的弹层

    在JavaScript中，实现弹层的方式多种多样，包括原生JS、jQuery插件以及各种UI库如Bootstrap、Element UI等。 标题"java开发常用的弹层"虽然提到了"java"，但根据描述和标签，我们主要讨论的是与JavaScript相关的...

    Javascripters大作--jQuery弹层类

    jQuery弹层类主要是通过CSS样式控制和JavaScript动态操作DOM来实现的。弹层通常包含背景遮罩和主要内容两个部分，其中主要内容可以是信息提示、表单填写、图片展示等。在jQuery中，我们可以通过创建新元素、设置样式...

    div层实现IE Firefox 页面半透明遮罩效果弹窗

    在实际应用中，你可能还需要添加一些交互功能，比如点击遮罩层关闭弹窗，或者通过JavaScript动态控制遮罩层和弹出窗口的显示和隐藏。这需要结合JavaScript和CSS的交互来实现，但基础的CSS样式设定已经在上述代码中给...

    微信小程序全屏遮罩层代码

    然后，在`js`文件中，定义一个`showMask`数据属性，控制遮罩层的显示与隐藏，并提供相应的事件处理函数： ```javascript // index.js Page({ data: { showMask: false, }, showFullScreenMask: function() { ...

    js+div+css弹出层.txt

    根据给定文件的信息，本文将围绕“js+div+css弹出层”的实现方法进行详细介绍。弹出层在网页设计中十分常见，主要用于提供额外的信息展示或者操作界面，如登录框、注册框、提示信息等。 ### 一、基本概念 #### 1.1...

    jQuery弹层类,纯JS的

    在实际应用中，可能还需要考虑一些其他因素，比如动画效果（如淡入淡出）、阻止页面背景的交互（添加半透明遮罩层）、确保弹层在页面上的正确定位（可能需要使用CSS布局技术如Flexbox或Grid）等。 通过学习和掌握...

    layer.js用法例子

    `layer.js` 是一个轻量级的JavaScript弹层插件，主要用于实现网页上的各种提示层、对话框以及模态窗口的效果。虽然它并不专注于提供复杂的功能组件，但其简洁易用的API和丰富的样式使得在页面美化和交互设计上非常...

    layer.js库

    layer.js是一个轻量级的前端弹层组件，它提供了多种类型的弹层样式，包括信息提示、确认对话框、页面加载遮罩、自定义内容弹层等，几乎涵盖了所有可能的弹层需求。其核心理念是简化代码，提升用户体验，让开发者能够...

    jQuery弹出层插件三种简单遮罩弹出框效果.rar

    《jQuery弹出层插件：实现简单遮罩弹出框效果》 在Web开发中，弹出层（Modal）是一种常见的交互元素，用于在用户与页面进行交互时提供额外的信息或者功能。jQuery作为一款强大的JavaScript库，提供了丰富的插件来...

    vue 遮罩层阻止默认滚动事件操作

    Vue.js 提供了一种优雅的方式来解决这个问题，即通过事件修饰符 `@touchmove.prevent` 来阻止默认的滚动行为。 在 Vue 中，我们可以将 `@touchmove.prevent` 事件监听器添加到遮罩层的组件元素上，以防止用户在遮罩...

    使用jQuery制作遮罩层弹出效果的极简实例分享

    CSS样式方面，要实现遮罩效果，通常需要用到两个div元素。一个是作为背景遮罩层，需要覆盖整个网页，可以通过设置position属性为fixed，并且宽度和高度都设置为100%，来确保遮罩层能够覆盖整个视窗。背景层的半透明...

    jquery实现弹出层

    2. **CSS样式**：为弹出层和遮罩层添加适当的CSS样式，以控制它们的位置、大小、透明度等。这可以通过内联样式、内部样式表或外部样式表实现： ```css .popup { position: fixed; top: 50%; left: 50%; ...

    jquery打开页面弹层，提示几秒后自动关闭

    在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理、动画效果等任务。在本场景中，我们要实现的功能是：当页面加载时，使用 jQuery 创建一个弹出层，显示提示信息，并在几秒钟后...

    精美网页弹出层大全

    在弹出层中，JavaScript常用于控制弹出层的显示、隐藏、动画效果以及处理用户输入的事件。例如，`document.getElementById('popup').style.display = 'block'` 可以用来显示ID为"popup"的弹出层元素。 2. ...

    js与css实现弹出层覆盖整个页面的方法

    本文将探讨如何利用JavaScript（js）和CSS（层叠样式表）来实现一个能够覆盖整个页面的弹出层。 首先，我们需要理解CSS中的关键属性来实现这一效果： 1. `position`: 这个属性用于定义元素的位置方式。在弹出层中...

    jquery弹出层特效

    在【Javascripters大作--jQuery弹层类】这个压缩包文件中，可能包含了实现这些功能的示例代码和详细说明，供学习和参考。通过学习和实践这些示例，开发者可以进一步提升自己的jQuery技能，创建更丰富的网页交互效果...

    使用原生JS实现弹出层特效

    本文将详细介绍如何使用纯JavaScript（即原生JS）来实现一个基本的弹出层特效。 #### 一、理解弹出层的基本构成 弹出层通常包含两部分：遮罩层（mask）和实际的弹出内容层（floater）。遮罩层的作用是覆盖在页面的...

Magicbox
Global site tag (gtag.js) - Google Analytics