<!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>jquery写的弹出窗口</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#container").fadeIn(800);
$("<div id='mask'></div>").appendTo("body");
$("#mask").css("opacity","0.6");
});
$("#shut").click(function(){
$("#mask").remove();
$("#container").hide();
});
})
</script>
<style type="text/css">
html, body {
width:100%;
height:100%;
}
#container {
width:400px;
height:300px;
border:20px #99CC00 ridge;
text-align:center;
display:none;
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-150px;
z-index:10;
background-color:#99CC00;
}
label, input {
padding:5px;
margin:5px;
}
ul,li{ list-style:none;}
#mask {
width:100%;
height:100%;
position:absolute;
background-color:#000;
left:0;
top:0;
z-index:8;
}
</style>
</head>
<body>
<p>JQuery写的一个弹出窗口</p>
<input type="button" id="btn" value="注册会员" />
<div id="container">
<ul>
<li>昵称：
<input type="text" />
</li>
<li>密码：
<input type="text" />
</li>
<li>确认：
<input type="text" />
</li>
<li>邮箱：
<input type="text" />
</li>
</ul>
<label>
<input type="submit" value="提交"/>
<input type="reset" value="重设" />
</label>
<input type="button" value="关闭弹出窗" id="shut" />
</div>
</body>
</html>
分享到：
相关推荐
"jquery 弹出模态窗体"是jQuery中的一个功能，用于创建交互式用户体验，使得用户在不离开当前页面的情况下能够与额外的信息或功能进行交互。模态窗体（Modal Dialog）通常被用来显示警告、确认、信息或表单填写等...
在网页开发中，模态窗体（Modal Window）是一种常用的设计元素，用于向用户展示重要的信息、确认操作或收集输入数据。模态窗体的特点是它会暂停主页面的交互，直到用户与其交互并关闭为止。本文将详细介绍模态窗体的...
标题“5个jQuery模态窗口”意味着我们将探讨五种不同的方法或插件，利用jQuery来实现模态窗口效果。这些模态窗口可能具有各自的特性和功能，例如自定义样式、动画效果、交互性等。下面将分别介绍这五个jQuery模态...
在实际应用中，模态窗体还有多种实现方式，比如使用HTML5的`<dialog>`元素，或者依赖于JavaScript库如jQuery UI、Bootstrap等。这些库提供了丰富的预设样式和行为，使得创建模态窗体变得更加便捷。但在这个例子中，...
在这个案例中，我们将探讨如何使用jQuery实现模态窗口登录效果。 首先，我们需要理解模态窗口的基本结构。通常，一个模态窗口由HTML、CSS和JavaScript三部分组成。HTML负责构建窗口的基础结构，CSS用来美化样式，而...
jQuery提供了多种方法来实现弹出窗体功能，这通常被称为“模式窗体”或“模态对话框”。让我们深入了解一下如何使用jQuery创建弹出窗体。 首先，我们需要了解什么是模式窗体。模式窗体是一种特殊的窗口，它在用户与...
**模态窗体**，在Web开发中，是一种常见的用户界面元素，用于向用户显示临时信息或接收用户的输入。模态窗体具有阻止背景页面交互的特性，直到用户关闭该窗口才能继续操作主页面。在JavaScript和CSS库的助力下，创建...
通常，遮罩层应具有全屏尺寸并设置较低的透明度，而模态窗口则需要居中并对齐。 ```css #modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);...
首先，jQuery的弹出窗体特效通常涉及到创建一个可浮动的对话框或模态窗口，这些窗口可以用于显示信息、确认用户操作或提供额外的交互界面。这种效果可以通过使用`.show()`, `.hide()`, `.fadeIn()`, `.fadeOut()`等...
模态子窗口通常由JavaScript或者jQuery库（如Bootstrap）创建，它们可以通过事件监听或回调函数与父窗口进行通信。在HTML中，模态窗口往往被包含在一个`<div>`元素中，通过CSS设置为不可见，并在需要时通过...
**jQuery网页窗体详解** jQuery，作为一款轻量级的JavaScript库，因其简洁的API...在实际项目中，根据需求，还可以扩展到其他jQuery插件，如表单验证插件、模态对话框插件等，进一步丰富和优化网页窗体的功能和外观。
在JavaScript编程中，弹出模态窗体是一种常见的交互方式，它能够暂停用户对主页面的操作，直到用户在弹出的窗口中完成某些任务或作出决定。本文将深入探讨如何利用JavaScript实现弹出模态窗体，并通过URL传递参数。 ...
除了基本的打开和关闭，jQuery模态对话框插件还支持多种高级特性，如自定义宽度和高度、设置对话框标题、添加关闭按钮、设置动画效果等。开发者可以根据需要调整这些参数以满足特定需求。 总结来说，"jquery.modal...
本资源包“jQuery弹出div窗体插件大全”聚焦于利用jQuery实现弹出div窗口的功能，这些插件可以帮助开发者快速创建交互式、功能丰富的对话框或提示窗口，提升用户体验。 首先，让我们来理解什么是jQuery弹出div窗体...
在父窗体中，`showModalDialog` 的返回值就是子窗体设置的`window.returnValue`，这样就可以获取到子窗体传递的数据： ```javascript var dialogResult = window.showModalDialog(...); console.log(dialogResult);...
在WEB开发中，模态窗体是一种常见的用户交互方式，它允许在当前页面上打开一个浮动层来展示信息或执行特定操作，而不会打断用户与主页面的交互。在模态窗体中实现导出或下载文件的功能，可以提升用户体验，使用户在...
这些对话窗体通常是模态的，意味着用户必须先处理对话框才能继续与页面其他部分进行交互。在JQuery库中，实现这样的功能主要依赖于JQuery UI框架，特别是其Dialog模块。 JQuery UI Dialog模块提供了丰富的功能和...
jqmodal是一款轻量级的jQuery模态对话框插件，它创建了一个浮动在网页内容之上的透明层，用于显示弹出内容。jqmodal允许开发者自定义弹出框的样式，同时支持设置弹出框的位置、大小和透明度。此外，它还提供了关闭...
2. **子窗体传值给父窗体**：在子窗体（即模态层）中进行操作后，可以将结果传递回父窗体，更新父窗体的相关控件。这通常通过JavaScript的事件触发和回调函数来实现，增强了不同组件间的交互能力。 应用实例： 1. ...
//id为blocked的元素设置为只读 $('#blocked').unblock();//解除 实现的思路： 我在主窗体中创建一个层，用来作为弹出窗体，包含一个iframe，通过参数指定URL，作为显示的内容，我觉得可能会有利于代码的重用，...