在web前端开发中,某些情况下需要自定义弹出窗口。一般采用弹出DIV层的方式来实现这种效果,其基本原理是先弹出一个半透明的DIV空白层,使其长度和宽度等于html页面中body的长度和宽度。使其下层不可用,然后再弹出需要弹出的一个DIV信息层。
JS主要代码如下:
1.ShowMask函数是弹出遮挡层,SetMaskPos是设置遮挡层的位置;
ShowMask(false, "", "");
var BoxID = "tdzcxx";
var BoxConID = "tdzcxx_con";
if($("#"+BoxID).size() <= 0){
var html = "<div id=\""+BoxID+"\" class=\""+BoxID+"\">";
html += "<div id=\""+BoxConID+"\" class=\""+BoxConID+"\"></div>";
html += "<table width=\"90%\" border=\"0\" cellspacing=\"0\" cellpadding=\"10\" align=\"center\">";
html += "<tr><td id=\"tdzcxx_txt\">";
html += str;
html += "</td></tr>";
html += "</table>";
html += "<table width=\"90%\" border=\"0\" cellspacing=\"0\" cellpadding=\"10\" align=\"center\">";
html += "<tr>";
html += "<td><a href=\"#\" id=\"tdzcxx_btn_ok\" class=\"layer_btn\">一 致</a></td>";
html += "<td><a href=\"#\" id=\"tdzcxx_btn_no\" class=\"layer_btn\">不一致</a></td>";
html += "</tr>";
html += "</table>";
html += "</div>";
$("body").append(html);
$("#tdzcxx_btn_no").click(function(){
$(this).blur();
$("#"+BoxID).hide();
CloseMask();
window.location.reload();
return false;
});
$("#tdzcxx_btn_ok").click(function(){
$(this).blur();
$("#"+BoxID).hide();
CloseMask();
document.loginform.submit();
return false;
});
}
$("#"+BoxID).show();
SetMaskPos("#"+BoxID);
设置遮挡层函数
function ShowMask(bol, title, content){
var maskID = "#maskbox";
var infoID = "#maskinfo";
if($(maskID).size() <= 0){
$("body").append(getNodeMask());
}
$(maskID).show();
if(bol){
if($(infoID).size() <= 0){
$("body").append(getNodeMaskInfo(title, content));
SetMaskPos(infoID);
}
$(infoID).show();
}
}
设置遮挡层的长度和宽度与body长度和宽度分别一致;
function getNodeMask(){
var nodeMask = document.createElement("div");
nodeMask.id = "maskbox";
nodeMask.style.width = $("body").width();
nodeMask.style.height = $("body").height();
return nodeMask;
}
function getNodeMaskInfo(title, content){
var nodeMaskInfo = document.createElement("div");
nodeMaskInfo.id = "maskinfo";
var nodeMaskTitle = document.createElement("div");
nodeMaskTitle.id = "masktitle";
nodeMaskTitle.innerHTML = title;
var nodeMaskContent = document.createElement("div");
nodeMaskContent.id = "maskcontent";
nodeMaskContent.innerHTML = content;
nodeMaskInfo.appendChild(nodeMaskTitle);
nodeMaskInfo.appendChild(nodeMaskContent);
return nodeMaskInfo;
}
function SetMaskPos(oid){
var scrollT = document.documentElement.scrollTop;
var scrollL = document.documentElement.scrollLeft;
var clientH = document.documentElement.clientHeight;
var clientW = document.documentElement.clientWidth;
var $obj = $(oid);
var h = $obj.height();
var w = $obj.width();
var posL = Number(scrollL) + (Number(clientW) - Number(w))/2;
var posT = Number(scrollT) + (Number(clientH) - Number(h))/2;
$obj.css({"left":posL+"px", "top":posT+"px"});
}
PS: 有时候会出现信息弹出层和遮挡弹出层都被遮挡的情况,这个时候可以设置信息弹出层的css参数:z-index为一个较大值,使其在div中最上层
分享到:
相关推荐
JavaScript 模式窗口 弹出窗 DIV JavaScript 模式窗口 弹出窗 DIV ...JavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIV
在这个场景中,我们关注的是如何使用jQuery结合magnific-popup插件来实现一个弹出Div模式窗口的功能。 `jquery.magnific-popup.js`是magnific popup插件的核心脚本,它提供了一种优雅的方式来创建各种类型的弹出...
这在创建幻灯片、弹出窗口或者全屏应用界面时非常有用。 实现`div`全屏的步骤主要包括以下几点: 1. **引入jQuery库**:由于项目中提到了jQuery插件,所以我们需要在HTML文件中引入jQuery库。可以通过CDN链接或者...
这是一个div模式窗口 </div> ('popupWindow').style.display='block';">打开窗口 ``` 6. 常见问题与解决方案: - `div`重叠:调整`z-index`以解决元素覆盖问题。 - 定位问题:确保`position`属性已设置,然后...
本篇将聚焦于JavaScript如何操作DIV,特别是弹出窗口的相关应用。 一、基本的JavaScript与DIV操作 1. 获取DOM元素:在JavaScript中,我们通常使用`document.getElementById()`,`document.querySelector()`或`...
"JQUERY弹出模式DIV"是指使用jQuery来实现一种常见用户界面设计——模态对话框或者称为弹出窗口。这种功能在网页中很常见,用于显示警告、确认信息或者展示详细内容等。 模态对话框(Modal Dialog)是一种阻止用户...
### JavaScript弹出窗口DIV层效果代码详解 在现代网页设计中,弹出窗口或模态框(Modal)是一种常见的交互模式,用于展示额外的信息、表单或其他内容,而不需重新加载整个页面。本文将深入解析如何使用纯JavaScript...
在压缩包内的“DIV弹出窗口-lhgdialog”文件,很可能是这个JS库的一个具体实现或者示例,名为lhgdialog。lhgdialog可能是一个流行的弹出对话框插件,它提供了一套完整的解决方案,包括但不限于动画效果、可定制的...
4. **Highslide JS**:压缩包中的"highslide-4.1.9"可能是指Highslide JS,这是一个流行的JavaScript库,专门用于创建高质量的弹出图像预览、滑块和画廊。它支持多种功能,如全屏、自动调整大小、缩略图导航等。 5....
在网页设计和开发中,"js弹出div大集合"是一个重要的主题,它涉及到JavaScript、CSS和HTML等技术的综合运用。"div"是HTML中的一个块级元素,常用于组织网页布局,而"js"则指的是JavaScript,一种广泛使用的客户端...
在网页设计中,"div弹出模式窗体,消息框样式"是一个常见的需求,用于向用户展示重要信息、警告或确认操作。这种技术利用HTML的`<div>`元素结合CSS来创建可定制的对话框,提供了更加丰富和交互性的用户体验。下面...
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线,外部资源仅需要jquery。有以下功能: 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...
### JavaScript 实现弹出模态效果div的知识点详解 #### 一、概述 在Web开发中,模态对话框(Modal Dialog)是一种常见的交互模式,它可以在不离开当前页面的情况下,展示一个弹出层用于提示用户信息或者进行某些...
在这个场景下,"jsp图片浏览器div弹出层"指的是使用JSP技术实现的一种功能,它可以在用户点击或触发某个事件时,通过`div`元素弹出一个图片浏览器窗口。`div`是HTML中的一个布局元素,可以用来组织网页内容,通过CSS...
在本教程中,我们将探讨如何利用 jQuery 实现 div 的弹出并加上缓冲效果,以实现更加平滑且吸引人的用户体验。 首先,让我们了解“缓冲效果”在动画中的含义。缓冲效果,通常被称为“缓动”,是一种让元素在移动或...
**jBox - 一个跨浏览器的Div模式窗口控件** 在网页开发中,有时我们需要创建一个弹出式的对话框来与用户交互,如显示信息、警告或者获取输入。传统的`window.showModalDialog()`方法虽然方便,但在某些浏览器或...
在网页设计中,模式窗口(Modal Window)是一种常见的交互元素,它可以在用户当前浏览的页面上弹出一个半透明的遮罩层,并显示一个独立的内容区域,用于展示警告、确认对话框或者更多详细信息。本示例是用div元素...
首先,模态弹出窗(Modal Dialog)是一种常见的UI设计模式,它能够阻止用户与页面其余部分的交互,直到用户处理完弹出窗口中的内容。这种设计通常用于显示重要的信息或者需要用户确认的操作。 在jQuery中,我们可以...
JavaScript 和 jQuery 模式化弹出层是一种常见的前端交互设计,用于在网页上显示重要的信息、提示、警告或用户操作的对话框。这种技术能够使用户聚焦于特定的任务,提高用户体验,同时也保持了页面的整洁。 一、...
### 弹出菜单-div+css知识点解析 #### 一、概述 本文档介绍了一种使用纯`div+css`技术实现的弹出菜单设计方案。该方案不仅提供了清晰易懂的代码示例,还包含了丰富的样式定义,使得最终的菜单不仅功能完善而且视觉...