<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery弹出层效果</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
.white_content_small {
display: none;
position: absolute;
top: 20%;
left: 30%;
width: 40%;
height: 50%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
$("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
</script>
</head>
<body>
<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
<div id="fade" class="black_overlay">
</div>
<div id="MyDiv" class="white_content">
<div style="text-align: right; cursor: default; height: 40px;">
<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
</div>
目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
</div>
</body>
</html>
相关推荐
在网页开发中，JS常用于创建各种弹出窗口，以实现如提示信息、用户输入对话框或者自定义内容窗口等功能。本篇文章将详细探讨JS弹出窗口的实现方式和相关知识点。 首先，JS中最常见的弹出窗口是`alert()`函数。它会...
在给定的标题“javascript 弹出窗口”和描述“推荐一个非常好用的javascript弹出窗口控件”中，我们可以推测这是一个关于使用JavaScript实现弹出窗口的控件库。下面我们将深入探讨JavaScript弹出窗口的相关知识点。 ...
### JavaScript弹出窗口知识点总结 #### 一、概述 JavaScript是一种广泛使用的脚本语言，它在前端开发中占据着极其重要的地位。通过JavaScript，开发者可以实现网页与用户的交互功能，其中弹出窗口就是一种常见的...
JavaScript弹出窗口是一种常见的网页交互方式，用于向用户展示额外信息或进行特定操作。本文将深入探讨如何设计和控制JavaScript弹出窗口。 首先，最基本的弹出窗口代码是使用`window.open`函数。例如： ```...
本文将深入探讨"js弹出窗口 + 获取上传文件全路径"这一主题，这两个知识点是JavaScript在交互式用户界面设计中的关键部分。 首先，让我们来讨论"js弹出窗口"。在网页开发中，弹出窗口通常用于显示警告信息、确认...
`GenJS`可能是指一个特定的库或者工具，用于生成JavaScript弹出窗口效果。下面将详细讨论JavaScript弹出窗口的实现以及可能与`GenJS`相关的知识点。 1. **JavaScript 弹出窗口** JavaScript 提供了三种基本的弹出...
在这个场景下，"lhgdialog.js"可能是一个这样的库，它扩展了JavaScript弹出窗口的功能。 "lhgdialog.js"可能包含以下特性： 1. **模态效果**：阻止用户与背景页面交互，直到弹出窗口被关闭。 2. **自定义样式**：...
标题中的“功能强大的JS弹出窗口”指的是利用JavaScript实现的各种弹出对话框功能，这些对话框能够增强用户体验，提供丰富的交互方式。 在描述中提到的弹出窗口js代码，它提供了多种弹出效果，让我们一一解析： 1....
首先，让我们了解一下什么是JavaScript弹出窗口。在网页开发中，我们经常使用`window.alert()`、`window.confirm()`和`window.prompt()`这三个函数来创建基本的弹出对话框。然而，这些内置的弹出窗口功能有限，样式...
### JavaScript弹出窗口代码详解 在网页开发过程中，有时我们需要创建一个新的浏览器窗口来显示特定的信息或功能，这就需要用到JavaScript中的`window.open()`方法。本文将详细介绍如何使用此方法以及其参数的意义...
在网页开发中，自定义js弹出窗口，也被称为弹出层或对话框，是一种常见的交互设计技术。这种技术允许开发者在用户与页面交互时显示额外的信息或功能，而不会中断主页面的工作流程。在本教程中，我们将深入探讨如何...
通过上述技术，我们可以创建出一个不仅功能强大，而且视觉效果出色的JavaScript弹出窗口。在实际开发中，可以参考现有的库和框架，如jQuery UI、SweetAlert2或者自定义实现，以满足特定项目的需求。对于初学者，理解...
javascript弹出窗口lhgdialog 非常好用
JavaScript弹出窗口通常是通过`window.open()`函数来实现的，它可以创建一个新的浏览器窗口或者在已存在的窗口中打开新的页面。但是，这种原生的弹出方式往往过于简单，无法满足复杂的交互需求，比如图片预览、滑动...
JavaScript（简称JS）是一种轻量级的编程语言，广泛用于网页和网络应用开发，而弹出窗口是JS中常见的交互方式。这篇文档主要介绍了名为lhgdialog的JS弹出窗口控件的使用方法。 lhgdialog控件由一系列文件组成，它们...
总结，"js弹出窗口、弹出层"是网页交互中的重要元素，涉及到了JavaScript的DOM操作、事件处理、样式控制等多个方面。理解并掌握如何创建和使用弹出层，对于提升网页的用户体验具有重要意义。"FineMessBox"可能提供了...
总的来说，jQuery popup javascript弹出窗口的实现涉及到JavaScript编程、CSS样式设计、事件处理、浏览器兼容性优化等多个方面，是一个综合性的网页开发任务。通过研究提供的文件，可以深入理解这些技术的结合应用。
总结，JavaScript弹出窗口是与用户进行交互的重要手段。从简单的`alert`、`confirm`、`prompt`到自定义模态对话框，再到第三方库的支持，开发者可以根据实际需求选择最适合的方法来实现弹出窗口。理解并掌握这些技巧...
总的来说，JavaScript弹出窗口是网页交互设计的重要组成部分，通过不同的函数和库，我们可以实现各种复杂的用户交互，提高网页的动态性和互动性。对于开发者来说，熟练掌握JS弹窗的使用不仅可以提升工作效率，还能为...