使用jQuery插件创建普通模态窗口登录效果

隐藏模态窗口技术是一个很好的解决方案，用于处理那些不是唯一的、必须出现在网页上的界面元素。社交网络可以使用模态窗口来传递只有成员才能看到的私有消息和表单。博客和杂志网站也适合作者独立于主网站的登陆页面。模态窗口比用JavaScript创建一个新窗口更容易，因为所有的东西都可以通过使用HTML标签呈现在同一个窗口中。我将演示如何使用jQuery插件leanModal来创建一个常规的模态窗口。如果你有麻省理工学院的通用许可证，这个插件是完全开源和免费的。我非常喜欢这个插件。使用起来非常方便，可以自己添加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 log in Window Demo/title link rel='快捷图标' href=' http://design shack . net/fav icon . ico ' link rel=' icon ' href=' http://design shack . net/fav icon . ico ' link rel='样式表' type=' text/CSS ' media=' all ' href=' style . CSS ' script type=' text/JavaScript ' src=' http 3360 js/jquery-1.9-license http://leanmodal.finelysliced.com.au/-/head下的jquery插件leanModal好消息是，我们不再需要包含任何默认的CSS样式表了，因为lean modal插件只提供了非常基本的JS功能，而且一切都被精简了，只留下了裸露的模板。但是，我们需要复制CSS板块来实现暗覆盖。这是我从插件网站复制的代码，用于默认样式表。复制的代码如下： # lean _ overlay {位置：固定；z指数：100；top: 0pxleft: 0px的模态窗口效应..结论可以用在更多的情况下，而不仅仅是登录表单。您需要考虑网页的各种UI元素，并考虑哪些元素在您自己的窗口中可能更有用。这涉及到特殊的形式或更长的细节，可能不是每个人都喜欢。请看看我的在线演示，看看我们如何使用标准的HTML块来实现这种leanModal jQuery效果。任何对CSS有一些基础知识的人都可以很容易理解我的默认样式设计。这个功能有这么多用途，其中不乏想象。但我真的希望这些示例教程代码可以为开发人员提供标准模板，以节省时间。