jQuery Twitter样式登录窗口

我将向您展示如何向您的网站添加一个非常酷的Twitter风格的登录窗口。 这很简单，只需遵循以下三个步骤：

1. 在您的JavaScript include中输入以下jQuery代码
2. 在下面输入HTML代码以创建表单和登录按钮
3. 编辑CSS文件，以获取您想要的网站外观

观看现场演示

jQuery(document).ready(function($) {
    $(".signin").click(function(e) {          
		e.preventDefault();
        $("fieldset#signin_menu").toggle();
		$(".signin").toggleClass("menu-open");
    });
	
	$("fieldset#signin_menu").mouseup(function() {
		return false
	});
	$(document).mouseup(function(e) {
		if($(e.target).parent("a.signin").length==0) {
			$(".signin").removeClass("menu-open");
			$("fieldset#signin_menu").hide();
		}
	});	
});

在您的html中输入以下代码：

  
  
 
   
   Sign in  
  
  
  

Email

Password

Remember me

Forgot your password?

这是CSS的示例： FRONT.CSS

对此有任何疑问，请随时与我联系 ！

From: https://www.sitepoint.com/jquery-twitter-style-login-window/