使用jQuery插件创建常规模态窗口登陆效果

 
隐藏模态窗口技术是一种很好的解决方案，用于处理不是特有必要出现在网页上的界面元素。社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表单。在博客和杂志网站也适用于与主网站分开的作者登陆页面，模态窗口比在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有一些基本的了解就不难理解我的默认样式设计。此功能有这么多的用途，其中不乏想象力。但我真的希望这些示例教程代码 可能会给开发者提供标准模板，以节省时间。

赞 (0)

相关推荐

  • JS中artdialog弹出框控件之提交表单思路详解

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口. 前言: 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 完善的接口 它的接口完善,可以轻易与外部程序配合使用.如异步写入消息.控制位置.尺寸.显示与隐藏.关闭等. 细致的体验 如果不是在输入状态,它支持Esc快捷键关

  • artdialog的图片/标题以及关闭按钮不显示的解决方法

    artdialog的图片/标题以及关闭按钮不显示的解决方法

    因其它css样式文件中包含"div{ overflow:hidden; }"引起的artdialog的图片,标题,以及关闭按钮不显示的问题: 如下图:  解决办法:在artdialog的样式文件顶部添加一行:div{ overflow:visible; }  最终效果:

  • artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载

    artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载

    artDialog是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验. artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 为了方便使用,特别制作出artDialog Dreamweaver代码提示的插件. 代码提示效果如下: 使用方法: 把artDialog.xml文件复制到 如:A

  • artDialog双击会关闭对话框的修改过程分享

    artDialog双击会关闭对话框的修改过程分享

    artDialog,一个jquery的对话框插件,很好用的说 但是在使用时发现鼠标双击时会自半对话框,查看源码发现有个监听鼠标双击的事件如下图:  简单的方法就是把该行去掉,为了扩展可改成如下图:  这样就可以动态配置是否需要此功能使用方法如下图: 复制代码 代码如下: $.dialog({ title : json.theme, content : json.content, dbclickHide:true, ////默认false,如果为true则双击就会关闭窗口 lock : true,

  • plupload+artdialog实现多平台上传文件

    plupload+artdialog实现多平台上传文件

    在没介绍正文之前先给大家介绍下plupload知识 plupload简介 Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部件,这样使你可以直接使用或是自己定制. plupload特性 Plupload使用jQuery的组件做为选择文件和上传文件的队列组件. Plupload使用Flash,Silverlight,HTML5,Gears,BrowserPlus.Fi

  • 分享2个jQuery插件--jquery.fileupload与artdialog

    分享2个jQuery插件--jquery.fileupload与artdialog

    这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法! 简单用代码举例子 最小化的方法 复制代码 代码如下: data-url是上传后执行上传文件的php方法 <input id="fileupload" type="file" name="

  • jQuery validate+artdialog+jquery form实现弹出表单思路详解

    功能描述: 在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证. 适用范围: 适用于在列表页面新增,修改记录. 需要加载的js文件: jquery.min.js artDialog.js iframeTools.js jquery.form.js jquery.validate.js 实现思路: 在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写

  • artDialog+plupload实现多文件上传

    artDialog+plupload实现多文件上传

    Plupload简介 Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部件,这样使你可以直接使用或是自己定制. 一.效果展示 包括文件上传面板以及文件上传列表 二.介绍 长话短说,采用spring springMVC mybatis maven mysql,实现多文件上传功能,下载使用的是流的形式. 其中涉及的分页我会另开一片博客介绍. 三.准备材料 pluploa

  • 给artDialog 5.02 增加ajax get功能详细介绍

    之前用过artDialog 5.0之前版本,非常佩服作者的创意和敬业精神,现在新版的功能朝着轻量级js的方便发展,我还是比较喜欢之前artDialog.open的功能,直接方便.但就是之前版本有点大,我现在只想在artDialog增加一点从ajax get远程内容,我的代码如下: 复制代码 代码如下: $.extend({ _htmlDataArr:new Array(), _findHTML:function(url){ var hd_len= $._htmlDataArr.length; f

  • jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法

    本文实例讲述了jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法.分享给大家供大家参考,具体如下: 大家都知道,ArtDialog是一款非常不错的.轻量级的.基于jQuery的对话框插件,深受大家的追捧,大伙可以到一下地址进行下载: https://code.google.com/p/artdialog/ https://github.com/aui/artDialog 截止到2014年9月17日,已经有几个重大的版本v4.1.7.v5.0.4和v6.0.2,其中4.x

  • Jquery弹出窗口插件 LeanModal的使用方法

    Jquery弹出窗口插件 LeanModal的使用方法

    开发网站少不了要经常用弹出窗口的形式,今天在网上搜了个小插件LeanModal,记录于此,方便自己,亦方便他人使用. 此插件是个老外写的,体积小是它最大的优点,压缩后1k不到.当然,此插件是寄生于JQuery上. 一. 效果图 二.使用步骤: 1.引用Jquery.js和leanModal.min.js 复制代码 代码如下: <script src="Javascript/jquery-1.4.1.min.js" type="text/javascript"&

  • jQuery插件artDialog.js使用与关闭方法示例

    本文实例讲述了jQuery插件artDialog.js使用与关闭方法.分享给大家供大家参考,具体如下: 子窗口关闭artdialog终极解决方案: window.parent.window.art.dialog({ id: 'qin123' }).close(); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

随机推荐