弹出层的一个小例子
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery弹出层实例</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#btnShow").click(function()
{
var str="我是弹出对话框";
$(".form").html(str);
$("#BgDiv").css({ display:"block",height:$(document).height()});
var yscroll=document.documentElement.scrollTop;
$("#DialogDiv").css("top","100px");
$("#DialogDiv").css("display","block");
document.documentElement.scrollTop=0;
});
$("#btnClose").click(function()
{
$("#BgDiv").css("display","none");
$("#DialogDiv").css("display","none");
});
});
</script>
<style type="text/css">
body,h2{margin:0 ; padding:0;}
#BgDiv{background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
#DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#DialogDiv .form{padding:10px;}
</style>
</head>
<body >
<div id="BgDiv"></div>
<div id="DialogDiv" style="display:none">
<h2>弹出层<a href="#" id="btnClose">关闭</a></h2>
<div class="form">
我是弹出对话框！！
</div>
</div>
<p> </p>
<p align="center">
<input value="弹出" class="but" type="button" id="btnShow" />
</p>
</body>
</html>
分享到：
相关推荐
- 防止页面滚动：在弹出层打开时，可以锁定页面滚动，确保用户注意力集中在弹出层上。 - 关闭弹出层的其他方式：除了点击关闭按钮，还可以监听Esc键或点击弹出层外部区域来关闭弹出层。 五、实际应用与案例分析 ...
JS弹出层页面实例
"jQuery弹出层网页特效"指的是利用jQuery来实现的弹窗或模态框效果，这种效果常用于显示通知、确认对话框、登录表单等，以增强用户交互体验。下面我们将深入探讨jQuery弹出层的实现原理、常见方法以及如何通过提供的...
在“jquery弹出层页面表单”这个主题中，我们将深入探讨如何利用jQuery来创建交互式的弹出层（modal）并实现表单功能。 一、jQuery弹出层（Modal）基础 1. 弹出层的概念：弹出层是一种在网页上以半透明背景和独立...
jQuery弹出层页面分享插件是实现这一功能的有效工具，它结合了前端技术如CSS、JavaScript和HTML5，使得网页内容能够轻松地被用户分享到各大社交媒体平台。本文将详细探讨这一插件的原理、实现方式以及如何将其应用到...
在IT领域，尤其是在Web开发中，"jquery弹出层不关闭 父页面刷新"是一个常见的交互需求。这里，我们主要讨论如何使用jQuery实现这样的功能，即在一个弹出层（通常是一个模态对话框）显示时，用户可以操作父页面而不会...
网页弹出层是网页设计中常见的一种交互元素，主要用于显示重要的信息、提示用户操作或进行交互确认。在网页开发中，弹出层可以是模态窗口（Modal）、非模态窗口（Non-modal）或者简单的提示框。这些实例可以帮助...
在.NET开发中，弹出层通常用于在用户与网页交互时提供信息提示、确认操作或者展示详细内容。这种效果能够增强用户体验，使页面看起来更加专业和美观。在本例中，我们将探讨如何在.NET环境中创建具有多层显示、包含...
弹出层是一种网页设计技术，它可以在用户与页面交互时，以对话框的形式显示额外的信息，而不会完全中断用户与主页面的互动。这些弹出层通常用于显示通知、广告、表单或任何需要突出显示的内容。 在jQuery中，我们...
标题 "原生jQuery实现弹出层页面分享插件特效源码.zip" 提供的信息表明，这个压缩包包含了一个使用原生jQuery编写的弹出层页面分享插件的源代码。弹出层通常指的是在用户交互时（如点击按钮）会在当前页面上弹出一个...
弹出层，也称为模态窗口或对话框，通常用于显示详细信息、警告消息、表单填写等，而不会中断用户在主页面上的浏览体验。在本资源包中，我们集中了百度的弹出层特效代码以及其他的弹出层特效实例，旨在为开发者提供...
标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题，特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中，"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...
弹出层，也称为模态窗口，是在用户与网页交互时临时出现在页面上的一个浮动元素，它遮盖住背景内容，直到用户与弹出层进行交互或关闭它。弹出层可以用于展示详细信息、进行表单填写、播放媒体等，而不干扰用户对主...
在网页中，弹出层（通常称为弹窗或提示框）是用户界面设计中常见的元素，用于显示警告、确认信息、输入数据或其他交互功能。本文将深入探讨JS弹出层的实现原理及其应用。 弹出层的基本概念是创建一个在用户与网页...
在网页设计和开发中，弹出层是一种常见的交互元素，用于提供额外的信息或者进行特定的操作。弹出层通常包括模态对话框、提示框、下拉菜单等，它们能够以不打断用户主流程的方式显示信息或请求用户输入。标题中的“很...
弹出层是在网页主内容之上显示的一个浮动窗口，它可以用来展示详细信息、提示、表单、图片或其他互动组件。其主要目的是在不中断用户对主要页面浏览的情况下，提供一个临时的交互空间，增加用户的沉浸感和操作便捷...
弹出层，也被称为模态对话框，是在当前页面上覆盖一层半透明或全屏的元素，焦点被锁定在这一层，用户必须先关闭弹出层才能继续与页面交互。实现弹出层的方式有很多种，包括但不限于HTML、CSS和JavaScript的组合使用...
在IT行业中，弹出层和遮罩层是网页交互设计中的常见元素，它们用于提供信息、展示内容或者进行用户交互。本项目“弹出层封装_1”利用jQuery、HTML5和CSS3技术实现了功能丰富的弹出层效果，包括多角度提示以及关闭...
网页弹出层在设计网页交互体验时经常使用，它们可以用于显示消息、表单、广告或其他需要用户关注的内容。然而，弹出层在实际应用中可能会遇到被其他元素遮挡的问题，尤其是Flash对象和下拉列表。本文将探讨如何解决...