<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> pop window </title>
<style type="text/css">
.popup {
display: none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
position: fixed;
top: 50%;
left: 50%;
width:200px;
height:100px;
z-index: 99999;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body style="width:798px;height:1900px;border:1px solid red;margin:auto">
<button id="btn" style="float: left;width: 50px;margin-top: 500px;">click</button>
<div class='popup'>11</div>
</body>
<script type="text/javascript" >
$('#btn').click(function() {
$(".popup").fadeIn(300);
var popMargTop = $(".popup").height() / 2;
var popMargLeft = $(".popup").width() / 2;
$(".popup").css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
return false;
});
$(".popup").click(function(){
$(this).fadeOut(300);
return false;
});
</script>
</html>
分享到：
相关推荐
在网页设计中，创建一个能够跨浏览器工作的居中弹框是一项常见的需求。"适用于ie，chrome , firefox等多种浏览器， 主要针对功能比较多的弹框，纯文本满足不了的情况"这个描述意味着我们需要构建一个多功能且兼容性...
在标题为“jquery弹框”的项目中，我们关注的是如何利用jQuery库来创建一个具有黑幕遮罩效果的弹框，该弹框在页面上始终保持居中，即使在滚动或调整窗口大小时也是如此。这种功能对于提供良好的用户体验至关重要，...
本话题将详细讲解如何利用jQuery实现一个弹出框功能，特别是如何让弹框高度自适应并且始终保持在屏幕中央。 首先，我们需要理解弹出框的基本概念。弹出框是一种用户界面元素，当用户触发特定操作时，它会在主窗口之...
实现弹出网页遮罩层，可兼容IE6/IE7/IE+++等； 缩放浏览器时，内容狂始终居中； 有点小bug，在IE6下，遮罩层颜色没透明，屎黑色，等我有空完善下。
这包括定位（通常是居中）、背景色、边框、透明度等。例如： ```css #popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border: 1px solid #ccc; ...
/* 居中 */ background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } 这是一个对话框示例。 ``` 现在，我们编写jQuery代码来控制对话框的显示和背景变...
/* 居中对齐 */ width: 400px; background-color: #fff; border: 1px solid #ccc; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } ``` 3. jQuery事件和动画：使用jQuery绑定点击事件，当触发...
5. **定位和大小调整**：弹框可以被配置为固定位置、居中显示，或者根据内容自动调整大小。 6. **动画效果**：弹出和关闭过程可以有平滑的过渡动画，增加视觉吸引力。 7. **可关闭选项**：用户可以选择在一定时间内...
`.bg` 是背景层，具有半透明黑色背景，而 `.main` 设置居中对齐，白色文本，并且包含一个右浮动的关闭按钮。 jQuery 部分则负责弹出框的显示和隐藏动画。`ToolTipTop` 对象有两个方法：`Show(Msg)` 用于显示弹出框...
《jbox：兼容jQuery1.9及以上版本，解决弹出框定位问题详解》 在Web开发中，弹出框作为一种常见的交互元素，被广泛应用于提示、确认、输入等场景。jBox是一款基于jQuery的弹出框插件，以其灵活性和易用性受到开发者...
这个样式会使弹框居中显示，具有白色背景、灰色边框和阴影效果。 总结一下，本项目中涉及的知识点包括： 1. jQuery选择器和DOM操作：如`$()`、`.html()`、`.text()`、`.append()`。 2. jQuery动画效果：`.fadeIn()...
jQuery实现点击查看大图并以弹框的形式居中，实现的关键代码如下所示： *{margin:0;padding:0;} .tab_bg{display:none;width:100%;height:100%;background:#282829;z-index:99;position:absolute;} .tab_img{width:...
/* 自动居中 */ padding: 20px; border: 1px solid #888; width: 80%; /* 宽度可以根据需要调整 */ } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:...
整个弹框实现是一个模块化的代码结构，每个功能如初始化省份列表、初始化学校列表、居中弹框等都是一个独立的函数。这种模块化设计使得代码易于维护和扩展。如果未来需要添加新功能或进行修改，开发者可以容易地定位...
本篇文章将深入探讨如何使用原生JavaScript和CSS来创建一个自定义的H5弹框，无需依赖任何外部库，如jQuery或Bootstrap。通过这种方式，我们可以更好地控制弹框的样式和行为，同时减少页面加载的依赖。 首先，我们...
这可能包括居中显示、跟随鼠标等不同策略。 4. **显示弹出框窗口** 显示弹出框窗口通常涉及HTML结构的创建和插入到DOM中。在给出的代码中，`boxHtml`变量包含了弹出框的HTML结构，包括标题、内容区域、关闭按钮等...
这包括定位（positioning）、尺寸（dimensions）、背景、边框、过渡效果等，确保弹框在页面上正确地居中并具有适当的视觉效果。 3. **JavaScript交互**：弹框的核心在于其交互性。我们需要用JavaScript来控制弹框的...
在本篇教程中，我们将探讨如何利用JavaScript（特别是jQuery库）来实现一个居中的弹窗。这种方法不仅简洁易懂，而且能够灵活地适应各种浏览器和设备。 首先，我们需要了解一些基础知识。在CSS中，为了实现绝对定位...
遮罩层通常需要全屏显示并具有一定的透明度，而弹出层则需要居中显示。这里可以这样设置： ```css #mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); ...