`

html 锁定页面(js遮罩层弹出div效果)

HTML 
阅读更多
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>UntitledDocument</title>
<script>
function createIframe(){
//mask遮罩层
var newMask=document.createElement("div");
newMask.id="mDiv";
newMask.style.position="absolute";
newMask.style.zIndex="1";
_scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
// _scrollHeight = Math.max(document.body.offsetHeight,document.documentElement.scrollHeight);
newMask.style.width=_scrollWidth+"px";
newMask.style.height=_scrollHeight+"px";
newMask.style.top="0px";
newMask.style.left="0px";
newMask.style.background="#33393C";
//newMask.style.background = "#FFFFFF";
newMask.style.filter="alpha(opacity=40)";
newMask.style.opacity="0.40";
newMask.style.display='none';
var objDiv=document.createElement("DIV");
objDiv.id="div1";
objDiv.name="div1";
objDiv.style.width="480px";
objDiv.style.height="200px";
objDiv.style.left=(_scrollWidth-480)/2+"px";
objDiv.style.top=(_scrollHeight-200)/2+"px";
objDiv.style.position="absolute";
objDiv.style.zIndex="2"; //加了这个语句让objDiv浮在newMask之上
objDiv.style.display="none"; //让objDiv预先隐藏
objDiv.innerHTML=' <div id="drag" style="position:absolute;height:20px;width:100%;z-index:10001;top:0; background-color:#0033FF;cursor:move ;" align="right"> <input type=button value="X" onclick="HideIframe(document.getElementById(\'mDiv\'),document.getElementById(\'div1\'));"/> </div>';
//更改了X按钮为触发关闭事件。
objDiv.style.border="solid #0033FF 3px;";
var frm=document.createElement("iframe");
frm.id="ifrm";
frm.name="ifrm";
frm.style.position="absolute";
frm.style.width="100%";
frm.style.height=180;
frm.style.top=20;
frm.style.display='';
frm.frameborder=0;
objDiv.appendChild(frm);
// newMask.appendChild(objDiv); //问题出在这里：你把frame所在的div变成了 newMask的子元素，当newMask透明度更改时，当然会影响到frame
document.body.appendChild(newMask);
document.body.appendChild(objDiv);
var objDrag=document.getElementById("drag");
var drag=false;
var dragX=0;
var dragY=0;
objDrag.attachEvent("onmousedown",startDrag);
function startDrag(){
if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV"){
objDrag.setCapture();
objDrag.style.background="#0000CC";
drag=true;
dragX=event.clientX;
dragY=event.clientY;
}
};
objDrag.attachEvent("onmousemove",Drag);
function Drag(){
if(drag){
var oldwin=objDrag.parentNode;
oldwin.style.left=oldwin.offsetLeft+event.clientX-dragX;
oldwin.style.top=oldwin.offsetTop+event.clientY-dragY;
oldwin.style.left=event.clientX-100;
oldwin.style.top=event.clientY-10;
dragX=event.clientX;
dragY=event.clientY;
}
};
objDrag.attachEvent("onmouseup",stopDrag);
function stopDrag(){
objDrag.style.background="#0033FF";
objDrag.releaseCapture();
drag=false;
};
}
function htmlEditor(){
var frm=document.getElementById("ifrm");
var objDiv=document.getElementById("div1");
var mDiv=document.getElementById("mDiv");
mDiv.style.display='';
var iframeTextContent='';
iframeTextContent+=' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">';
iframeTextContent+=' <html xmlns="http://www.w3.org/1999/xhtml">';
iframeTextContent+=' <head>';
iframeTextContent+=' <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />';
iframeTextContent+=' </head>';
iframeTextContent+=' <body>';
iframeTextContent+=' <table>';
iframeTextContent+=' <tr>';
iframeTextContent+=' <td>Name </td>';
iframeTextContent+=' <td> <input type="text" value="" /> </td>';
iframeTextContent+=' </tr>';
iframeTextContent+=' <tr>';
iframeTextContent+=' <td>Email </td>';
iframeTextContent+=' <td> <input type="text" value="" /> </td>';
iframeTextContent+=' </tr>';
iframeTextContent+=' <tr>';
iframeTextContent+=' <td> <input type="button" id="btGo" value="Go" /> </td>';
iframeTextContent+=' </tr>';
iframeTextContent+=' </table>';
iframeTextContent+=' </body>';
iframeTextContent+=' </html>';
frm.contentWindow.document.designMode='off';
frm.contentWindow.document.open();
frm.contentWindow.document.write(iframeTextContent);
frm.contentWindow.document.close();
objDiv.style.display = ""; //显示浮动的div
var objGo=frm.contentWindow.document.getElementById("btGo");
objGo.attachEvent("onclick",function (){
HideIframe(mDiv,objDiv);
});
}
function HideIframe(mDiv,objDiv){
mDiv.style.display='none';
objDiv.style.display = "none"; //隐藏浮动的div
}
</script>
</head>
<body onLoad="createIframe()">
<table>
<tr>
<td>aa</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>bb</td>
<td><input type="text"/></td>
</tr>
</table>
[br]
<input type="button"id="tt"name="tt"value="Click"onClick="htmlEditor()"/>
</body>
</html>
分享到：
| td的background失效时用background-image
评论
发表评论

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

相关推荐

    iframe弹出框遮罩父类页面

    在描述中提到，通过查看demo中的`layout.html`页面可以直观地看到效果，并且实现这一功能并不需要在父页面中编写子页面的JavaScript或弹出框代码，所有相关代码都可以在子页面内部完成。 首先，我们来理解一下`...

    Javascript实现弹出DIV层并锁屏

    这就是"Javascript实现弹出DIV层并锁屏"所涉及的主要内容。 首先，让我们了解一下什么是DIV。在HTML中，`&lt;div&gt;`元素是“division”的缩写，用于对网页内容进行区域划分。通过CSS样式，我们可以对这些DIV进行定位、...

    js实现遮罩层弹出框的方法

    js实现遮罩层弹出框的方法是一种常用的技术手段，用于在网页上临时显示一个浮层，通常用于显示提示信息、警告或成功消息等。通过该方法可以为用户提供更佳的交互体验，同时也能有效吸引用户的注意力。 在实现遮罩层...

    几种网页弹出层的实例

    在"弹出Div锁定桌面.rar"中，你可能会看到如何创建一个带有全屏遮罩层的弹出层，这个弹出层会锁定在用户的桌面上，直到用户完成指定操作或关闭弹出层。实现这种效果通常需要JavaScript配合CSS来完成，例如使用`...

    js弹出层暂停实现模式窗口效果(修改后的)

    综上所述，"js弹出层暂停实现模式窗口效果"涉及到HTML布局、CSS样式、JavaScript交互、动画效果、可访问性和响应式设计等多个方面。通过合理地组合这些技术，可以创建出功能完备且用户体验良好的弹出层效果。在实际...

    DIV遮罩层如何实现

    DIV遮罩层是一种在网页上添加的半透明覆盖层，用于实现对页面其他内容的遮挡，常用于弹出层、加载提示或页面临时锁定等场景。实现DIV遮罩层的关键知识点主要包括以下几点： 1. HTML结构：创建一个用于遮罩的DIV元素...

    jQuery点击按钮弹出遮罩层并固定居中特效源码.zip

    按钮将触发弹出遮罩层的事件，而遮罩层则是一个全屏覆盖的透明或半透明元素，用于焦点锁定和视觉效果。例如： ```html 点击弹出遮罩层 &lt;div id="mask" style="display:none;"&gt;&lt;/div&gt; ``` 3. **CSS样式**：设置...

    js弹出注册页面

    - **动画效果**：通过 CSS 动画或 JavaScript 实现平滑的弹出效果。 - **表单验证**：利用 JavaScript 对用户输入进行实时验证。 - **后端交互**：通过 AJAX 调用后端接口处理用户提交的数据。 #### 四、总结 通过...

    Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top: [removed]documentElement.scrollTop + 340...

    jQuery基于jQueryModal.js插件实现的多款实用的弹出层效果源码.zip

    jQueryModal.js是jQuery的一个插件，专门用于创建弹出层或模态对话框，它提供了多种功能和自定义选项，使得在网页上实现各种弹出效果变得非常简单。 基于jQueryModal.js插件的弹出层效果源码，可以让我们快速地在...

    jquery特效 弹出层

    - 为了防止用户在弹出层显示时与背景交互，通常会设置一个半透明的遮罩层。使用CSS和jQuery，我们可以轻松实现这一功能。 三、示例代码 以下是一个简单的jQuery弹出层实现示例： ```html &lt;!DOCTYPE html&gt; &lt;html ...

    Jquery 等待弹出框插件jquery.blockUI（遮罩蒙板）

    jQuery BlockUI 插件就是这样一个工具，它能轻松实现页面的“锁定”效果，创建出类似于弹出框的遮罩层，为用户提供直观的反馈。 **一、BlockUI 插件安装与引入** 首先，你需要在项目中引入 jQuery 和 BlockUI 插件...

    jQuery BlockUI 插件（遮罩层）

    jQuery BlockUI 是一个非常实用的JavaScript插件，它允许开发者轻松地在网页上实现遮罩层效果，也就是我们常说的“加载中”或“禁用界面”功能。这个插件可以将任何HTML元素或者整个页面进行锁定，创建一个半透明的...

    JS实现弹出层锁定窗口(改进版).txt

    ### JS实现弹出层锁定窗口（改进版）详解 #### 一、背景介绍与问题描述 在Web开发中，弹出对话框或遮罩层是一种常见的交互方式，它能够阻止用户对当前页面进行进一步的操作，直到完成特定的任务或流程。其中，`...

    提示框，页面不可编辑

    "提示框，页面不可编辑"这个标题指的是在使用jQuery实现的提示框中，当弹出框出现时，整个页面背景会被淡化，并且用户无法对页面其他部分进行编辑，确保用户注意力集中在提示框上。这种设计可以避免用户在处理关键...

    JQuery.BlockUI 弹出层

    总的来说，jQuery.BlockUI凭借其小巧的体积、丰富的功能和灵活的自定义能力，成为开发者在实现页面弹出层效果时的一个理想选择。结合适当的HTML和CSS，开发者可以轻松创建出符合项目需求的弹出层交互体验。

    第34章 项目1-博客前端：封装库--遮罩锁屏1

    在本章节的"项目1-博客前端：封装库--遮罩锁屏1"中，我们将学习如何实现一种常见前端交互效果，即创建一个遮罩层和锁屏功能，以增强用户在弹出窗口（如登录界面）操作时的体验。以下是对这个知识点的详细解释： 1. ...

    jquery做的一个简单的屏幕锁定提示框

    标题中的“jquery做的一个简单的屏幕锁定提示框”指的是使用jQuery库来实现的一个基本的屏幕锁定功能，即在用户点击特定元素（例如按钮）时，会在屏幕上弹出一个半透明的遮罩层，同时显示一个提示信息。这个功能常...

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