<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#login{ width:300px; height:300px; border:1px #000 solid; position:absolute;}
#close{ position:absolute; right:0; top:0;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
//var oDiv = $('<div>div</div>');
//$('body').append( oDiv );
$('#input1').click(function(){
var oLogin = $('<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>');
$('body').append( oLogin );
oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2+$(window).scrollTop());
$('#close').click(function(){
oLogin.remove();
});
$(window).on('resize scroll',function(){
oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() );
});
});
});
</script>
</head>
<body style="height:2000px;">
<input type="button" value="点击" id="input1" style="margin-top: 800px;"/>
<!--<div id="login">
<p>用户名:<input type="text" /></p>
<p>密码:<input type="text" /></p>
<div id="close">X</div>
</div>-->
</body>
</html>
说明：此代码是参考秒味视频教程改写。
原来的教程中的代码实现是有bug，具体为红色的字体。
在项目中遇到的情况是，触发弹出的窗体的元素在点击的时候，其父类windows已经有滚动条啦，如果不加速滚动的距离就会出现距离的问题。
相关推荐
总的来说，“jQuery遮罩弹窗居中”是前端开发中一个实用的技巧，通过结合jQuery和CSS定位，可以实现弹窗在不同屏幕尺寸下的自动居中，提升用户界面的交互体验。对于开发者来说，理解和掌握这一技术对于优化网页交互...
本篇文章将详细讲解如何利用jQuery实现弹窗效果，这是一种常见的用户交互功能，常用于提示信息、确认操作或者展示详细内容。 首先，我们需要引入jQuery库。在HTML文件的`<head>`部分，添加以下代码来链接到jQuery的...
1. 使用jQuery实现弹窗居中显示的原理和方法。 2. CSS中如何使用`position: fixed;`和`position: absolute;`来分别设置遮罩层和弹窗内容层。 3. 如何通过JavaScript动态计算元素的位置，使其在页面中居中。 4. 使用`...
`center()` 函数是实现弹窗居中定位的关键。函数接收一个jQuery对象作为参数，该对象代表需要居中的弹窗元素。函数首先通过`$(window).width()` 和 `$(window).height()` 获取当前浏览器窗口的宽度和高度，并计算...
本项目“jQuery实现不同弹窗大小均垂直居中效果”旨在教你如何利用jQuery创建一个灵活的弹出窗口，无论窗口大小如何，都能在页面上保持垂直居中。 首先，我们需要理解jQuery的核心概念。jQuery通过选择器（如$("#id...
本资源“jQuery点击遮罩弹出层固定居中代码.zip”提供了一种实现自适应遮罩弹窗的解决方案，特别适用于移动设备。下面我们将深入探讨相关知识点。 首先，我们来理解“遮罩弹出层”。在网页中，遮罩层通常是一个半...
我们见过很多jQuery实现的弹出窗口效果，当然，比较大的插件要先排除在外。 弹窗的窗口往往需要事先固定好大小，也就是说宽度高度的css要先写死，这样的用户体验不大好 今天给大家推荐一个，无论你弹出窗口...
弹窗通常需要有半透明背景、居中对齐和渐隐渐现的效果，这些都可以通过CSS3的属性，如`opacity`、`transform`和`transition`来实现。同时，表单的样式，包括输入框、按钮等元素，也可以通过CSS进行定制，以提供更好...
在前端开发中，创建弹窗效果是常见的需求，用于显示通知、确认对话框或展示详细信息。本项目“html+jquery实现简洁弹窗”聚焦于使用HTML5、jQuery和CSS3来构建这样的功能。下面我们将深入探讨这些技术如何协同工作以...
在遮罩弹窗幻灯片特效中，jQuery起到了核心作用，通过其强大的选择器和方法来选取页面元素、控制它们的显示和隐藏，以及实现平滑的过渡动画。 1. **jQuery选择器**：jQuery提供了丰富的选择器，如ID选择器(#id)，类...
为了实现平滑的过渡效果，可以结合使用`.fadeIn()`或`.show('slow')`方法，使弹窗和大图以动画形式出现。同时，可能还会使用`.animate()`方法调整弹窗大小以适应不同尺寸的大图。 在`js`目录下的JavaScript文件中，...
在本示例中，我们将探讨如何使用jQuery实现两种常见的弹窗效果：淡入弹窗和滑动弹窗。这两种效果都是网页交互中的重要元素，能够为用户提供更好的视觉体验和交互反馈。 1. **淡入弹窗效果**： 淡入弹窗是一种常见...
在本文中，我们将深入探讨如何使用jQuery来实现一个弹窗（系统提示框）的效果。jQuery是一种流行的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互等任务。在这个例子中，我们将创建一个基本的弹窗，它会...
总结来说，使用JavaScript来实现弹窗居中并不是一个特别复杂的任务，但是需要对CSS定位属性有一定的了解，并能够灵活运用JavaScript来解决CSS计算上的细节问题。通过上述方法，我们可以在各种情况下，为用户提供一个...
- **CSS样式**：为了使弹窗居中，CSS会使用`margin: auto`和可能的`position: absolute`或`fixed`，以及动态计算宽度和高度以保持居中。 - **jQuery代码**： - **初始化**：在页面加载完成后，jQuery的`$(document...
本文将详细介绍如何使用 jQuery 实现一个简单的弹窗遮罩效果。 首先，我们需要理解基本的 HTML 结构。在这个实例中，我们有两个主要的元素：一个用于遮罩层的 `#mask` ID 和一个用于弹窗的 `.popup` 类。遮罩层通常...
《jQuery弹窗插件TipsWindow深度解析》 在Web开发中，交互性和用户体验是至关重要的因素，而弹窗作为常见的用户交互元素，被广泛应用在各种网页功能中，如提示信息、登录注册、广告展示等。jQuery，作为一个轻量级...
在本项目"jquery居中弹出框"中，我们聚焦于利用jQuery实现一个易于使用且样式的居中弹出框。这个解决方案旨在提供一个便捷的方法，使得开发者无需从零开始编写复杂的CSS和JavaScript代码，就可以快速地在网页上创建...
而jQuery弹窗插件则是这个库中的一个重要应用，用于创建各种类型的弹出层，如警告对话框、信息提示、登录窗口、模态对话框等。本文将详细介绍两款值得推荐的jQuery弹窗插件及其特性。 首先，我们来谈谈第一款插件...