日期：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创建模态窗口登陆效果

使用jQuery创建模态窗口登陆效果的更多相关文章

  1. （面试题）html中创建模态窗口的方法有哪些？

    一.创建模态和非模态对话框除了alert(""); confirm(""); prompt("");之外还有创建模态对话框:vReturnV ...

  2. [Win32]创建模态窗口

    http://www.cnblogs.com/zplutor/archive/2011/02/20/1958973.html 在Win32编程中,如果要显示一个模态窗口,一般是先创建对话框模板,然后使 ...

  3. 如何取消FLEX里模态窗口的毛玻璃效果

    在Flex里面,比如使用PopUpManager.createPopUp(this,TipWindow,false)第三个参数设成true 会出现毛玻璃效果让CPU飙升,可不可以改变模态窗口的效果,不 ...

  4. [转]Ionic最佳实践-使用模态窗口modal

    本文转自:http://m.blog.csdn.net/blog/betreex/45649689 原文地址:Ionic最佳实践-使用模态窗口modal 模态窗口的结构 在Ionic中,模态窗口通过$ ...

  5. asp.net数据加载进度和模态窗口的完美打开，而且窗口不被阻止

    采用jquery的技术打开模态窗口,效果肯定不错,但是微软的asp.net ajax就无法用了,例如updatepanel面板和updateprogress就看不到效果,也就是jquery与asp.n ...

  6. 十、ios 模态窗口［实例］

    一.模态窗口概念 对话框一般分为两种类型:模态类型( modal )与非模态类型( modeless ).所谓模态对话框,就是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的对话 ...

  7. 基于vue3.0+electron新开窗口|Electron多开窗体|父子模态窗口

    最近一直在折腾Vue3+Electron技术结合的实践,今天就来分享一些vue3.x和electron实现开启多窗口功能. 开始本文之前,先来介绍下如何使用vue3和electron来快速搭建项目. ...

  8. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  9. JQuery Dialog(JS模态窗口,可拖拽的DIV) 效果实现代码

    效果图 调用示意图   交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的“提交”按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户 ...

随机推荐

  1. javaEE简答题整理

    1. 什么是JavaEE?其编程思想是什么? JavaEE是一个标准的中间件体系结构,是企业分布式应用开发标准.JavaEE的编程思想是组件—容器. 2. 为什么提出JavaEE体系结构? (1)为满 ...

  2. J2SE知识点摘记-数据库(二)

    一.          查询数据 注意sql的内容. 通过ResultSet接口保存全部的查询结果,通过Statement接口中的executeQuery()方法查询.查询之后需要分别取出.通过nex ...

  3. Android 天天爱消除辅助

    简介 <天天爱消除>是一款移植于手游的消除类益智游戏,该游戏只有通过手机登录QQ跟微信才能进行,这样一来这款游戏必然会大红大紫. 功能 开发Android自动化触屏事件,录制操作脚本,实现 ...

  4. 柯南君：看大数据时代下的IT架构（8）消息队列之RabbitMQ--案例（topic起航）

    二.Topic(主题) (using the Java client) 上一篇文章中,我们进步改良了我们的日志系统.我们使用direct类型转发器,使得接收者有能力进行选择性的接收日志,,而非fano ...

  5. Unix/Linux环境C编程入门教程(6) 安装Fedora C/C++开发环境

    安装Fedora  C/C++开发环境 1 Fedora 是一个开放的.创新的.前瞻性的操作系统和平台,基于 Linux. 2．选择自定义配置 3.设置版本为10.0 4.选择稍后安装 5.选择64位 ...

  6. Centos6.8下安装oracle_11gr2版主要过程

    安装前准备 下载oracle版本 地址:http://docs.oracle.com/cd/E21901_01/index.html ,下载2个文件分别是 linux.x64_11gR2_databa ...

  7. [Leetcode][Python]23: Merge k Sorted Lists

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 23: Merge k Sorted Listshttps://oj.leet ...

  8. 解决cookie无法删除的问题

    今天遇到一个cookie无法删除的问题,退出操作时cookie无法删除,必须在首页先进行退出操作,后来发现一个网友的博客,介绍了无法删除Cookie的原因,原来是我关于cookie的基础知识没搞清楚. ...

  9. objective-c 关键字和概念

    @ 看到这个关键字,我们就应该想到,这是Object-C对C语言的扩展,例如@interface XXX. @interface 声明类 @implementation 实现类 @protocol 声 ...

  10. Swift与Objective-C交互

    在同一个工程中是可以同时使用Swift和OC的,但不可以同时出现在同一个文件中. OC调用Swift相关信息的方法 在***.m文件中导入工程名-Swift.h即可. 如工程名为ABC,则在需要使用S ...