首先是CSS-调整它，但是您喜欢：
a.selected { background-color:#1F75CC; color:white; z-index:100;}.messagepop { background-color:#FFFFFF; border:1px solid #999999; cursor:default; display:none; margin-top: 15px; position:absolute; text-align:left; width:394px; z-index:50; padding: 25px 25px 20px;}label { display: block; margin-bottom: 3px; padding-left: 15px; text-indent: -15px;}.messagepop p, .messagepop.div { border-bottom: 1px solid #EFEFEF; margin: 8px 0; padding-bottom: 8px;}和Javascript：
function deselect(e) { $('.pop').slideFadeToggle(function() { e.removeClass('selected'); }); }$(function() { $('#contact').on('click', function() { if($(this).hasClass('selected')) { deselect($(this)); } else { $(this).addClass('selected'); $('.pop').slideFadeToggle(); } return false; }); $('.close').on('click', function() { deselect($('#contact')); return false; });});$.fn.slideFadeToggle = function(easing, callback) { return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);};最后是html：
<div > <form method="post" id="new_message" action="/messages"> <p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p> <p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p> <p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a href="/">Cancel</a></p> </form></div><a href="/contact" id="contact">Contact Us</a>
这是一个jsfiddle演示和实现。
根据情况，您可能需要通过ajax调用来加载弹出内容。最好避免这种情况，因为这可能会给用户带来更大的延迟，使他们无法观看内容。如果采用这种方法，您将在此处进行一些更改。
HTML变成：
<div> <div ></div> <a href="/contact" id="contact">Contact Us</a></div>
Javascript的一般概念变为：
$("#contact").on('click', function() { if($(this).hasClass("selected")) { deselect(); } else { $(this).addClass("selected"); $.get(this.href, function(data) { $(".pop").html(data).slideFadeToggle(function() { $("input[type=text]:first").focus(); }); } } return false;});
