引用
一般需要弹出遮罩层窗口时，大部分都会用jquery来实现，不用太多的操作，只需调用jquery里面内置的方法即可。而下面这段代码则是完全脱离jquery自己用css+div写出来的弹出遮罩层效果，在有些时侯还是可以替代jquery使用的。
//这些是需要加入页面的样式
<style>
*{ margin:0; padding:0;}
body{ height:100%;}
.dis{ background:#cccccc; position:absolute; left:0; right:0; top:0; bottom:0; -moz-opacity:0.5; filter:alpha(opacity=50);z-index:98;}
.dis1{ width:400px; height:120px; left:38%; top:40%; position:absolute; margin-left:-50px; margin-top:-25px; z-index:99; border: 1px solid #666666; background-color:#FFFFFF; }
</style>
//这些是需要加入页面的js方法
<script type="text/javascript">
function submitOrder() {
var div = document.createElement("div");
div.className="dis";
div.style.width=document.documentElement.scrollWidth ;
div.style.height=document.documentElement.scrollHeight ;
document.getElementsByTagName("body")[0].appendChild(div);
setTimeout("insert()",2000);
}
function insert()
{
var div1 = document.createElement("<div class='dis1'>");
document.getElementsByTagName("body")[0].appendChild(div1);
var insert = "<table width='100%' border='0' cellpadding='0' cellspacing='0'><tr><td height='60' align='center' style='font-size:14px'><b>请您在新打开的网上银行页面上完成充值。</b></td></tr>"
+ "<tr><td height='60' align='center'>"
+ "<input type='button' style='height:25px;width:80px;font-size:12px' value='完成充值' onClick=location.href='../merchant/TransMan.jsp'>"
+ " "
+ "<input type='button' style='height:25px;width:100px;font-size:12px' value='充值遇到问题' onClick=location.href='../merchant/help_question.htm'></td></tr></table>";
div1.innerHTML=insert;
}
</script>
<body>
//然后再页面上调用js方法即可
<a href="javascript:submitOrder();">弹出窗口</a>
</body>
分享到：
相关推荐
在网页设计和开发中，"div模拟弹出层"是一种常见的交互设计技术，它允许开发者在用户与页面交互时提供额外的信息或者功能。通常，弹出层是通过JavaScript（JS）来实现的，以模拟像alert这样的系统级对话框，但更加...
例如，`<dialog>`元素就是用来创建对话框或弹出框的，但在这个案例中，我们可能更倾向于使用自定义的HTML结构来模拟弹出框的效果，如创建一个包含内容的`<div>`元素，并通过JavaScript控制其显示和隐藏。 CSS3则...
本篇文章将深入探讨如何使用Div、CSS和JavaScript来创建一个带有弹出层效果的模拟窗口。 首先，`Div`是HTML中的一个块级元素，可以用来组织页面内容。在模拟窗口的实现中，我们通常会创建一个Div作为窗口的主要容器...
本文将详细解析如何使用jQuery实现弹出遮罩层效果，这是一个常见的UI设计元素，常用于提示信息、加载等待或者对话框等场景。 首先，我们需要创建HTML结构。在提供的代码中，有两个按钮分别用于打开和关闭遮罩层，一...
一个典型的div弹出窗口可能由多个div组成，比如一个主容器div、一个遮罩层div以及一个内容区域div。内容区域可以动态填充不同的信息，如文本、图片或表单。HTML标签的使用要遵循语义化原则，以提高可访问性和SEO优化...
标题和描述均提到了“Js模拟弹出层”，这指的是使用JavaScript来创建一个不依赖于浏览器内置弹窗机制的自定义弹出层。这种技术在Web开发中非常常见，尤其是在需要控制更复杂交互或视觉效果时。弹出层可以用于显示...
这种效果可以通过 CSS 实现视觉上的遮罩层，以及通过 JavaScript 控制显示和隐藏来完成。 要实现 jQuery 弹出登录框效果，你需要以下步骤： 1. **HTML 结构**：创建一个包含登录表单的 div 元素，设置其初始样式为...
总的来说，这个项目提供了基础的交互式UI组件开发实践，包括遮罩层、可拖动的弹出层和模拟select的功能。对于前端开发者来说，理解和实现这样的功能是提高技能和提升项目质量的重要步骤。通过这个案例，我们可以深入...
在jQuery中，我们可以利用自定义的div元素来模拟这种弹出窗，并通过CSS控制其样式，包括透明度和位置。关键在于，我们需要添加一个背景层（通常称为遮罩层），这个遮罩层覆盖整个页面，使得用户只能与弹出窗交互。 ...
遮罩层（mask）是弹出菜单中的关键元素，它是一个全屏半透明的背景，用于突出显示弹出菜单并阻止用户与页面其他部分的互动。通过CSS，我们可以设置遮罩层的颜色、透明度以及位置，使其与页面完美融合。同时，...
在本主题中，我们将深入探讨如何使用 jQuery 实现弹出层效果，包括警报对话框、确认对话框以及自定义的警告框。 1. **jQuery 警报对话框**： jQuery 不直接提供标准的 `alert()` 对话框，但可以通过模拟实现。通过...
在网页开发中，"jQuery CSS3页面弹出loading加载代码"是一个常见的需求，尤其是在页面内容动态加载或执行耗时操作时，为了提供更好的用户体验，通常会显示一个加载指示器（loading），让用户知道页面正在处理数据。...
这个插件允许开发者轻松地将任何HTML元素（如div）转换为一个阻塞用户界面的“遮罩层”，通常用于模拟加载或等待状态。它的基本使用方法如下： ```javascript $.blockUI({ message: '请稍候...</h1>', css: { ...
弹出框通常包含一个遮罩层（mask）和一个内容区域（popup content）。遮罩层的作用是阻止用户与页面其他部分进行交互，并将用户的注意力集中到弹出的内容上。 ### 二、jQuery简介 jQuery是一款快速、简洁的...
当弹出遮罩层时，我们希望通过CSS来禁用页面的滚动功能，但仅仅设置`body { overflow: hidden; }`并不足够，因为这会影响到整个页面，包括遮罩层本身。因此，我们需要一种方法来区分主体内容与遮罩层的滚动状态。 ...
《使用HTML5、jQuery、CSS实现磨砂玻璃效果弹出层技术详解》 在Web开发领域，用户交互体验是至关重要的。为了提升用户体验，设计师和开发者们常常会使用各种技术来创造出引人入胜的视觉效果。其中，“磨砂玻璃效果...
"css"文件夹中的CSS样式定义了弹出层的外观，包括弹出层的大小、位置、拖动效果，以及背景遮罩的颜色和透明度。CSS选择器和属性可能包括`.popup`、`.mask`、`.close`等，用于控制不同元素的样式。 6. **JavaScript...
### 模拟弹出窗口效果实现方法 在网页开发中，有时我们需要创建一个模拟的弹出窗口效果，这种效果能够使用户在不离开当前页面的情况下查看额外的信息或完成某些操作。这种模拟弹出窗口通常会阻止用户与底层页面的...
- **动态加载内容**：根据用户操作或请求，动态地在页面中加载新的div层，如弹出菜单、浮动广告等。 - **布局调整**：在响应式设计中，通过JS动态创建或调整div层，实现不同屏幕尺寸下的自适应布局。 - **动画效果**...
Bootstrap Modal 的核心特点是它具有一个半透明的遮罩层和一个在屏幕中央浮动的弹出内容，提供了良好的用户体验。 在Bootstrap Modal的设计中，主要涉及到以下几个关键点： 1. **HTML 结构**： 弹出层的基础HTML...