使用jQuery创建模态窗口登陆效果
日期：2013-8-22 来源：GBin1.com
隐藏模态窗口技术是一种很好的解决方案，用于处理不是特有必要出现在网页上的界面元素。社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表单。在博客和杂志网站也适用于与主网站分开的作者登陆页面，模态窗口比在JavaScript中创建新窗口更容易，因为使用HTML标记显示，所有 的东西能都呈现在同一个窗口中。
我将演示如何利用jQuery插件leanModal建立一个常规模态窗口。如果你有MIT general license，那么这个插件是完全开源和免费的，我很喜欢这个插件，用起来相当方便，还能自行添加CSS，达到自定义的效果。
开始
首先创建两个命名为“index.html”和“style.css”的文件，在同一个目录中，创建另一个文件夹命名为/js/，包含进刚才两个文件。第一个是微型jQuery库，第二个是leanModal插件，命名为jquery.leanModal.min.js。
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Modal Login Window Demo</title>
<link rel="shortcut icon" href="http://designshack.net/favicon.ico">
<link rel="icon" href="http://designshack.net/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.leanModal.min.js"></script>
<!-- jQuery plugin leanModal under MIT License http://leanmodal.finelysliced.com.au/ -->
</head>
可喜的是我们不需要再包含任何默认CSS样式表了，因为leanModal插件只提供了非常基本的JS功能，一切都被精简下来，只剩光秃秃的模板。然而我们需要复制CSS板块来实现黑暗覆盖效果。下面是我从插件网站复制下来的用在默认样式表中的代码。
#lean_overlay { position: fixed; z-index:100; top: 0px; left: 0px;
..........
结语
模 态窗口效果可以用在更多的情况下，不仅仅是登录表单。你需要考虑各种UI元素的网页，并考虑哪些元素在自己的窗口中可能更有用。这涉及到特殊形式或更长的 详细内容，可能不是每个人都喜欢。请大家看看我的在线示例演示，看看我们如何能够使用标准的HTML块实现这个leanModal jQuery效果。任何人对于CSS有一些基本的了解就不难理解我的默认样式设计。此功能有这么多的用途，其中不乏想象力。但我真的希望这些示例教程代码 可能会给开发者提供标准模板，以节省时间。
via 极客标签
使用jQuery创建模态窗口登陆效果的更多相关文章
- （面试题）html中创建模态窗口的方法有哪些？
一.创建模态和非模态对话框除了alert(""); confirm(""); prompt("");之外还有创建模态对话框:vReturnV ...
- [Win32]创建模态窗口
http://www.cnblogs.com/zplutor/archive/2011/02/20/1958973.html 在Win32编程中,如果要显示一个模态窗口,一般是先创建对话框模板,然后使 ...
- 如何取消FLEX里模态窗口的毛玻璃效果
在Flex里面,比如使用PopUpManager.createPopUp(this,TipWindow,false)第三个参数设成true 会出现毛玻璃效果让CPU飙升,可不可以改变模态窗口的效果,不 ...
- [转]Ionic最佳实践-使用模态窗口modal
本文转自:http://m.blog.csdn.net/blog/betreex/45649689 原文地址:Ionic最佳实践-使用模态窗口modal 模态窗口的结构 在Ionic中,模态窗口通过$ ...
- asp.net数据加载进度和模态窗口的完美打开，而且窗口不被阻止
采用jquery的技术打开模态窗口,效果肯定不错,但是微软的asp.net ajax就无法用了,例如updatepanel面板和updateprogress就看不到效果,也就是jquery与asp.n ...
- 十、ios 模态窗口［实例］
一.模态窗口概念 对话框一般分为两种类型:模态类型( modal )与非模态类型( modeless ).所谓模态对话框,就是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的对话 ...
- 基于vue3.0+electron新开窗口|Electron多开窗体|父子模态窗口
最近一直在折腾Vue3+Electron技术结合的实践,今天就来分享一些vue3.x和electron实现开启多窗口功能. 开始本文之前,先来介绍下如何使用vue3和electron来快速搭建项目. ...
- BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- JQuery Dialog(JS模态窗口,可拖拽的DIV) 效果实现代码
效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的“提交”按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户 ...
随机推荐
- JS数组操作常用方法
toString():把数组转换成一个字符串 toLocaleString():把数组转换成一个字符串 join():把数组转换成一个用符号连接的字符串 shift():将数组头部的一个元素移出 un ...
- C#文本文件或其他文件新内容追加
以txt文本为例,以下代码实现a.txt文件中追加内容 FileStream mystream = new FileStream("C:\\a.txt", FileMode.Ope ...
- 使QQ窗口八字形转圈
//先有思路 后有代码 总是不知不觉中乱敲一通 今天做个标记 感谢老师课堂上的讲解#include <stdio.h> #include <math.h> #include & ...
- 数据库合并数据sql
1.sql2000中只能用自定义的函数解决 )) , 'aa') , 'bb') , 'aaa') , 'bbb') , 'ccc') go )) ) as begin ) select @str = ...
- powerdesigner for sqlserver的一些实用配置
在实用powerdesigner生成sqlserver 数据表时常常遇到一些问题: 1.数据中定义的字段名称相同生成物理模型时会报错. 2.数据各表之间的主键不能定义一样的名称. 我现在的需求是将数据 ...
- Andrew Ng Machine learning Introduction
1. 机器学习的定义:Machine learning is programming computers to optimize a performance criterion(优化性能标准) usi ...
- JDBC增强
JDBC增强 批处理:批量处理sql语句,比如批量添加用户信息. addBatch() //pstmt.addBatch() 就是替换一条一条执行的execute****** executeBat ...
- LNMP : 502 Bad Gateway 解决小记，真正的原因
站点搬迁到新的server.原先一直都是LAMP.如今改为LNMP. 将重写文件 htaccess改成 nginx的 conf.放到了站点.可仅仅能打开首页,其它重写页面一打开都是不停的载入. 载入等 ...
- Neo4j数据库简单
作为世界上先进的地图数据库,Neo4j如今,公司已成为许多互联网的首选.Neo4j它是基于java开源地图数据库开发,另外一个NoSQL数据库.Neo4j在保证对数据关系的良好刻画的同一时候.还支持传 ...
- Samba在CentOS下的图形化界面的安装
第一步:构建yum仓库(在此用的是北交大的yum仓库) 打开目录/etc/yum.repos.d下的CentOS-Base.repo文件,此处是我自己建的yum仓库,修改里面的链接地址为北交大的镜像的 ...