<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
* {margin:0;padding:0;font-size:12px;}
html,body {height:100%;width:100%;}
#content {background:#f8f8f8;padding:30px;height:100%;}
#content a {font-size:30px;color:#369;font-weight:700;}
#alert {border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;}
#alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;}
#alert h4 span {float:left;}
#alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;}
#alert p {padding:12px 0 0 30px;}
#alert p input {width:200px;margin-left:20px;height:40px;}
#alert p input.myinp {border:1px solid #ccc;height:20px;}
#alert p input.sub {width:60px;margin-left:30px;height:20px;}
.sub {width:60px;margin-left:30px;height:20px;}
</style>
<script type="text/javascript">
function aa(){
var myAlert = document.getElementById("alert");
myAlert.style.display = "block";
myAlert.style.position = "absolute";
myAlert.style.top = "50%";
myAlert.style.left = "50%";
myAlert.style.marginTop = "-75px";
myAlert.style.marginLeft = "-150px";
mybg = document.createElement("div");
mybg.setAttribute("id","mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(mybg);
document.body.style.overflow = "hidden";
}
function can(){
var myAlert = document.getElementById("alert");
var myCancle= document.getElementById("cancle");
mybg = document.createElement("div");
myAlert.style.display = "none";
mybg.style.display = "none";
}
function subm(){
var q = document.getElementById("q");
alert(q.value);
}
</script>
</HEAD>
<BODY>
<input type="button" id="bt" value="ok" onclick="aa();">
<div id="alert">
<h4><span>aaaaaaa</span><span id="close" onclick="can();">关闭</span></h4>
<p><label>bbbbbbb:</label></p>
<p><input type="textarea" id="q" name="w" cols="30" rows="3"/></p>
<p><input type="button" value="确认" onclick="subm();" class="sub" /><input type="button" id="cancle" value="取消" class="sub" onclick="can();" /></p>
</div>
</BODY>
</HTML>
分享到：
相关推荐
因此，使用`DIV`配合`JS`来实现自定义的弹出提示框成为了一种常见且灵活的解决方案。本篇将详细讲解如何利用`DIV`和`JS`创建弹出提示框以及其背后的原理和应用。 首先，`DIV`是HTML中的一个块级元素，它本身没有...
在网页设计中，弹出窗口是一个常见的功能，用于显示警告、确认对话或者提供更多的信息。传统的Alert弹出窗口虽然简单易用，但其样式单一且功能有限。为了解决这个问题，开发者们创造出了各种自定义的弹出窗口框架，...
在Web开发中，弹出层是一种常见的交互元素，用于显示临时信息、用户对话或进行操作确认。本篇文章将深入探讨如何使用jQuery实现弹出层功能，以及相关源码分析和应用工具。 首先，jQuery库简化了JavaScript的操作，...
"SimpleModal"是一个基于jQuery的弹出层插件，用于创建灵活、可定制的模态对话框，适用于展示各种内容，如注册表单、登录框、通知或确认对话。下面将详细阐述jQuery弹出层和SimpleModal插件以及如何在注册表单场景中...
这通常通过点击页面上的按钮或链接触发一个模态对话框（即弹出层）来实现，对话框内包含登录表单。这种设计提高了用户体验，因为用户无需跳转到新的页面，也不必担心丢失当前浏览状态。 实现这个效果，我们首先需要...
这个代码可能使用JavaScript创建了一个对话框式的弹出框，浮动在页面之上，通常用于提示信息或用户确认操作。 10. **一个经典的CSS标签面板.htm** 最后，这个文件可能展示了如何使用CSS创建标签面板，常用于展示...
content: '<div class="popup-form">这是弹出层的表单</div>' //这里写入弹出层的内容 }); }); ``` 通过以上实例，我们可以看到jqTransform如何简化并美化了表单设计，同时结合layer增强了交互性。在实际项目中...
**jQuery对话框（jQuery Dialog）**是jQuery UI库中的一个组件，它提供了一种优雅的方式来创建弹出式窗口，如警告、确认或信息提示，以及更复杂的交互式对话框。这个功能强大的工具允许开发者轻松地将网页内容封装到...
jQuery DialogBox是一款流行的JavaScript插件，它基于jQuery库，用于创建功能丰富的对话框或弹出框。这个插件提供了一种优雅的方式，使开发者能够轻松地在网页中添加交互式通知、确认对话、模态窗口等功能，从而提升...
Dialog基于jQuery弹出层对话框插件是一种广泛应用于网页交互中的组件，它允许开发者在页面上创建可定制的、交互式的对话窗口。该插件利用了JavaScript库jQuery的强大功能，结合CSS3技术，实现了丰富的动画效果和灵活...
4. `jquery弹出层背景变暗 Lee dialog collect by Ajax中国 http--www_okajax_com.htm`：这个文件名暗示了一个可能包含jQuery弹出层实现的示例，其中可能包括了背景变暗效果，这种效果常用于突出显示模态框。...
HTML5响应式模态框，或称为模态对话框，是网页设计中一个重要的交互元素。在现代网页开发中，模态框常用于显示额外...通过不断的实践和优化，我们可以创建出既美观又实用的模态框组件，提升网站的整体质量和用户体验。
在本话题中，我们将深入探讨如何使用jQuery实现与QQ校友相似的弹出对话框功能。 首先，理解“弹出对话框”在网页交互中的作用至关重要。对话框通常用于提供一种中断用户流程的方式，展示额外信息、询问用户或执行...
在IT行业中，模仿MSN弹出对话框是一种常见的用户界面（UI）设计实践，尤其是在构建即时通讯软件时。MSN，全称Microsoft Network，是微软推出的一款早期的即时通讯工具，其简洁明了的对话框设计深受用户喜爱。在这个...
在网页设计和开发中，"支持弹出图片文字和表单模态框代码"是一种常见的交互功能，用于增强用户体验和网站的互动性。模态框（Modal Box）是一种设计模式，它强制用户与当前出现的窗口进行交互，直到关闭该窗口后才能...
这个名为"鼠标右键弹出QQ在线客服.zip"的压缩包文件显然包含了一个实现特定功能的前端代码示例，即当用户在网页上右键点击时，会弹出一个QQ在线客服的对话窗口。这一功能对于提升用户体验和及时解决用户问题非常有...
在网页开发中，"在弹出对话框的同时保持页面的显示"是一个常见的需求，尤其是在创建交互式用户体验时。对话框通常用于提供用户确认、输入信息或显示警告等，而保持页面背景可见则可以让用户理解对话框出现的上下文，...
在网页设计中，有时我们需要创建一个遮罩层（shade）以实现特定效果，例如弹出一个模态对话框，使得用户在处理完对话框内的事务之前无法与页面其他部分交互。这里我们将详细讨论如何使用JavaScript（js）和CSS来创建...
一个简单的弹窗可能包含一个背景遮罩层和一个包含对话内容的框。例如： ```html <div id="dialog-mask" class="hidden"></div> <div id="dialog-box"> 弹窗标题 这里是弹窗内容。 关闭 </div> ``` 这里，`#...