同一个界面中弹出登录框
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" ""&
&html xmlns=""&
&head&&title&弹出登录框实验&/title&
&link href="css/css.css" rel="stylesheet"
type="text/css" /&
&&&H1&来试一下效果吧&/H1&
align="center"&
type="button" value="试一下"
onclick="openFrame()"&
&&&当你点击"试一下"按钮时，会弹出登录框，并且该登录框不是另一个html文件。
&&/center&
&div id="ControlLoginPanel"
style="display:"&
style="margin-left:20font-size:12"&
style="height:40font-weight:"&用户名：&/td&&td&&input
type="text" id="usernameLogin"
style="height:20width:150"/&&&&/td&
id="usernameError"&&/td&&/tr&
style="height:40font-weight:"&密&
码：&/td&&td&&input
type="password" id="pwd"
style="height:20width:150"/&&&&/td&
id="passwordError"&&/td&&/tr&
style="height:40"&&/td&&td&&input
type="button" style="height:25width:50" value="登陆"
onclick="checkLogin()"/&
&input type="button" style="height:25width:50"
value="取消"
onclick="clearLayer();"/&&/td&&/tr&
function clearLayer() {
&document.getElementsByTagName_r("body")[0].removeChild(document.getElementByIdx_x("bodyDiv"));
&document.getElementByIdx_x("ControlLoginPanel").style.display
function checkLogin() {
&var res =
&var username =
document.getElementByIdx_x("usernameLogin").
&var password =
document.getElementByIdx_x("pwd").
&if (username!="user") {
&&jQuery("#usernameError").html("用户名出错");
&else if (password!="123456") {
&&jQuery("#passwordError").html("用户密码出错");
&&jQuery("#usernameError").html("");
&&jQuery("#usernameError").html("");
&&jQuery("#passwordError").html("");
&&clearLayer();
&&jQuery("#myframe").attr("src","check.html");
function openFrame(){&&
&//预置样式用于生成遮罩对象
&var bodyStyle=
{position:"absolute",left:"0",top:"0",zIndex:"9999",width:"100%",height:"999em",backgroundColor:"#000",filter:"alpha(opacity=50)",opacity:"0.5"};
&var bodyDiv =
document_createElement_x("div");//document.getElementsByTagName_r("body")[0].style.height="100%";
&for(var i in bodyStyle) {
&&bodyDiv.style[i]=bodyStyle[i];
&bodyDiv.id="bodyDiv";
&document.getElementsByTagName_r("body")[0].a(bodyDiv);
&var　ControlLoginPanelDiv　=　document.getElementByIdx_x("ControlLoginPanel");
style={position:"absolute",left:"50%",top:"50%",zIndex:"10000"}//预置样式用于生成
[主要内容] 的父容器对象
&for(var i in style) {
&&ControlLoginPanelDiv.style[i]=style[i];
&//这里是得到一个marginTop值，那么就得用“网页卷去的高”加上自身高度的一半。
&ControlLoginPanelDiv.style.marginTop=-(ControlLoginPanelDiv.scrollHeight/2)+((window.pageYOffset)?window.pageYOffset:document.documentElement.scrollTop)+"px";
&ControlLoginPanelDiv.style.marginLeft=-(ControlLoginPanelDiv.scrollWidth/2)+"px";
&ControlLoginPanelDiv.style.display="";
&document.getElementsByTagName_r("body")[0].a(a);&&&
&document.getElementsByTagName_r("body")[0].style.height="100%";
点击“试一下”按钮之前：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。系统已开启自动识别垃圾评论机制，识别到的自动封号，下载出错或者资源有问题请联系全栈客服QQ
html5星空背景的登录页面带粒子特效
所需积分：20
亲，积分不够，
或联系QQ人工充值
亲，vip会员下载原创作品 积分5 折，其余免积分下载
PS:尊重原创作者劳动成果，感谢分享！
充值方式： 或联系QQ人工充值弹出窗口固定位置相关的博客
可能很多人不知道，规模大的企业和IT预算多的企业的移动App大部分都是基于混合模式开发实现的。 很多做App开发的技术人员会存在一种偏见，觉得“采用混合模式，基于HTML5技术开发出来的App，体验以及功能会和原生模式开发的存在差距”，所以更愿意使用原生模式开
Lisp的本质(The Nature of Lisp) 作者 Slava Akhmechet 译者 Alec Jang 出处: http://www.defmacro.org/ramblings/lisp.html 简介 最初在web的某些角落偶然看到有人赞美
本文详细的介绍了在Visual Studio（以下简称VS）下实现API钩子的编程方法，阅读本文需要基础：有操作系统的基本知识（进程管理，内存管理），会在VS下编写和调试Win32应用程序和动态链接库（以下简称DLL）。 API钩子是一种高级编程技巧，常常用来
基于STM32的uCGUI移植和优化 　　首先在开始这个说明之前,要简要说明下具体的环境: 　　编译工具:MDK4.20 　　开发板:安富莱v2版开发板 　　调试器:JLink v8盗版 移植篇 　　相信大家有移植经验的都知道,移植确实是一件非常墨迹的事情,怎
弹出窗口固定位置相关问题集
FlexMDI多窗口组件库，如何使弹出的多个窗口不重叠？
FlexMDI多窗口组件库，如何使弹出的多个窗口不重叠？可以的话，能实现多个窗口之间的挤压效果吗？就是拖动一个窗
jquery中直接用alert()输出弹出窗口在谷歌浏览器中显示位置居中？？？？
jquery中直接用alert()输出弹出窗口在谷歌浏览器中显示位置
创建新进程在固定位置
MFC平台上用什么API运行一个新进程在窗口固定位置,比如固定在Windows窗口的左边，占桌面的三分之一？
html为 iframe子页面 弹出窗口 指定显示位置
问题描述： 一个页面a.html中通过iframe内嵌了一个子页面b.html（这个无权修改）
弹出窗口固定位置相关基础文章
弹出窗口|页面
【1、最基本的弹出窗口代码】 其实代码非常简单：
因为着是一段javascripts代码，所以它们应该放在标签和之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将
...当前页面的背景下，通过展示一个“迷你页面”，或一个弹出的对话框。这个轻量级的层就是我们所说的一个“浮层”。
轻量级的浮层图可以用来问问题，获得输入，引入特征，包括流程，给予指示，或展示信息。他们可以...
...“磁盘管理”工具创建虚拟磁盘，单击“开始→运行”，弹出“运行”窗口，在文本框中输入“diskmgmt.msc”(不含双引号)，按下回车键，打开“磁盘管理”窗口，单击“操作→创建VHD”，弹出“创建和附加虚拟磁盘”窗口，单击...
12个ajax弹出层效果js代码，功能都很强大。
Thickbox - 基于 jQuery，支持 AJAX，轻量级的而且比较高效。支持图片与HTML内容。大小约为 40k，目前还可作为 WordPre
弹出窗口固定位置相关资料
...左下角，出现Win8开始屏幕略缩图时，点击鼠标右键，会弹出一个Win8的系统功能菜单，从中选择“控制面板”既可打开。
图示：将鼠标移动到Win8传统桌面左下角，出现Win8开始屏幕略缩图时，点击鼠标右键
图示：在Win8传统桌面...
...等)　　一、解决表格紧贴左上方的问题 方法一：Ctrl+J，弹出Page Properties，将Left, Top, Margin Width, Margin Height 全部 设为0。 方法二：把下面一段代码加到你的中topmargin=&0& l
windows7系统
1、在Win7桌面上单击鼠标右键，在弹出的右键菜单中选择“新建→快捷方式”命令。
2、然后在创建快捷方式窗口中输入“Control sysdm.cpl,,2”(双引号内的内容)并单击“下一步”按钮，将其命名为“硬件”。
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低...
RDS是一种稳定可靠、可弹性伸缩的在线数据库服务。支持MySQL、SQL Server、Postgr...
HTTPDNS是面向移动开发者推出的一款域名解析产品，具有域名防劫持、精准调度的特性。
面向阿里云ECS实例、HPC和Docker的文件存储服务。如何创建一个JavaScript弹出DIV窗口层的效果
转载 &更新时间：日 15:13:56 & 作者：
我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果
在本教程中，我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果。 创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一。传统的JavaScript弹窗已经不适合目前网站的设计理念了，理由有二：首先，不友好——生硬的弹出对话框且伴随着“哐”的一声对用户体验是个很大的挑战；其次，兼容性不够强——有相当多的浏览器屏蔽了这种JS的Alert()方法。于是，一个良好用户体验的网站需要一种更合理的解决方案——使用很少的HTML代码，很少的CSS代码和几行的JavaScript代码来模拟浏览器默认的弹出窗口（即替换掉默认的Alert()界面和功能）。 实现原理： 首先，我们将弹出框中的内容放置在一个特殊的DIV层中，然后默认隐藏它（即初始不可见，使用CSS即可实现）。当用户执行某个动作时——比如点击某个链接或者将鼠标光标移动到某个链接上——我们将之前设置好的隐藏层显示在所有页面元素的最上层（将使用JS操作实现）。此外，我们还将在弹出DIV窗口中设置一个按钮来执行——当用户点击此按钮时关闭窗口的功能。 实现过程： 就如我上面提到的，我们首先需要创建一个特殊的DIV层，然后我们将弹出窗口的内容放在这个DIV层里面。在这里，我们将其ID命名为“popupcontent ”以区别于其他DIV层。 &div id="popupcontent"&这是一个DIV弹窗效果!&/div& 弹出窗口的CSS修饰代码： 接下来，让我们给上面已创建好的这个DIV弹出层进行CSS美化。其中最重要的几个参数分别是：overflow（内容溢出）, visibility（可见性） 和position（定位方式）。同时我也给这个窗口效果添加了很多其他代码，但这些只是用于美化，使这个窗口更绚丽。所以，我们最后定义的CSS代码形如：
代码如下: #popupcontent{ position: visibility: overflow: border:1px solid #CCC; background-color:#F9F9F9; border:1px solid #333; padding:5 }
从上面CSS代码中的红色部分可以看出：这个DIV层初始默认状态是不可见的。 大家可以根据需要对以上代码进行美化，但请务必保留position，visibility，overflow三个属性。 JavaScript代码用于触发和显示弹出窗口： 这可能是本教程最重要最有趣的地方了。我们接下来会编写2个过程函数分别用于显示和隐藏上面那个DIV弹窗。当然，这两个函数之中会包含一些主体逻辑。 过程函数中需要顺序包含的逻辑： 计算JavaScript弹出窗口在屏幕上的显示位置（定位）； 在弹出窗口中添加一个状态栏（或按钮），用于关闭打开状态下的窗口； 显示弹出窗口。 为了简单起见，本例中我们设置的显示位置是Top：200，Left：200。即以浏览器内容框的左上角为坐标，向下偏移200PX，向左偏移200PX。 弹出窗口的大小我们可以在显示函数的参数中进行设置，包括两个参数：窗口长度和窗口宽度。 如果你需要将本例中的代码进行二次开发，有个地方需要特别注意，那就是获取弹出窗口DIV层的DOM对象，我们可以通过下面这个getElementById函数来获取ID名为“Popcontent”的DOM对象。
代码如下: var popUp = document.getElementById("popupcontent");
在获取这个（弹出窗口）DOM对象之后，我们可以在JS代码中修改窗口的相对的位置和窗口大小。
代码如下: popUp.style.top = "200px";//窗口距离浏览器内容区最上方的偏移值 popUp.style.left = "200px";//窗口距离浏览器内容区最左边的偏移值 popUp.style.width = w + "px";//窗口的宽度 popUp.style.height = h + "px";//窗口的高度
接下来，我们需要给窗口添加一个“关闭”按钮，用于在窗口开启状态下关闭这个窗口。要完美的实现这一功能，首先我们需要声明一个全局变量，用于存储弹出窗口DIV中的内容。这是因为，如果你在一个页面中显示多个内容不同的弹出窗口，你不需要将按钮重复的复制到这些DIV层中，这样就简化了行为逻辑：
代码如下: if (baseText == null) baseText = popUp.innerHTML; popUp.innerHTML = baseText + "&div id=\"statusbar\"&&button onclick=\"hidePopup();\"&Close window &button&&/div&";
最后一个需要注意的地方是这个“关闭”按钮的定位问题。这个很容易实现，设置一下这个按钮对象的向上的空白边即可（空白边的数值设置成稍小于整个弹出窗口的DIV高度即可）。 至此，所有的行为逻辑讲解完毕，最后的弹窗显示函数的完整代码如下：
代码如下: var baseText = function showPopup(w,h){ var popUp = document.getElementById("popupcontent"); popUp.style.top = "200px"; popUp.style.left = "200px"; popUp.style.width = w + "px"; popUp.style.height = h + "px"; if (baseText == null) baseText = popUp.innerHTML; popUp.innerHTML = baseText + "&div id=\"statusbar\"&&button onclick=\"hidePopup(); \"&Close window&button&&/div&"; var sbar = document.getElementById("statusbar"); sbar.style.marginTop = (parseInt(h)-40) + "px"; popUp.style.visibility = "visible"; }
隐藏弹出窗口： 隐藏弹出窗口的过程就相当简单了。只需要首先获取弹出窗口那个DIV的DOM对象，然后将其属性设置成“隐藏”即可。
代码如下: function hidePopup(){ var popUp = document.getElementById("popupcontent"); popUp.style.visibility = "hidden"; }
拓展HTML代码最终实现弹窗效果： 我们需要做的就是在某个链接或者按钮的对应事件上添加JS函数“showPopup() ”即可。 比如，需要在鼠标移动到某连接上时弹出窗口： &a href="#" onmouseover="showPopup(300,200);" &Open popup&/a& 需要在鼠标点击某个连接时弹出窗口： &a href="#" onclick="showPopup(300,200);" &Open popup&/a&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具