jquery - 聊天框喜欢联系我们表格

Question

我见过很多网站，公司通常使用联系我们表格、登录或在聊天框等右下角的注册表单。

每当我们悬停并单击 . 一个完整的表单打开，用户可以提交数据。

我也想在我的项目中应用它。是否有一个jquery插件或其他东西。

请指导如何做到这一点。

Answer 1

好的，给你，DEMO http://jsfiddle.net/yeyene/fpPJz/1/

HTML

<div id="contact">
    <div id="button"><a>Contact Us</a></div>
    <form>
        <div>
            <label for="name">Name<i class="icon-star"></i></label>
            <input id="name" name="name" type="text" />
        </div>
        <div>
            <label for="email">E-mail<i class="icon-star"></i></label>
            <input id="email" name="email" type="text" />
        </div>
        <div>
            <label>Telephone</label>
            <input id="phone" name="phone" type="text" />
        </div>                            
        <div>
            <label for="message">Message<i class="icon-star"></i></label>
            <textarea id="message" name="message" cols="" rows=""></textarea>
        </div>                            
        <div>
            <input id="send" name="send" type="submit" value="Send" />
        </div>
    </form>    
</div>

CSS

body{margin:0;padding:0;}
#contact {
    position:absolute;
    right:2px;
    bottom:2px;
    width:270px;
    font-size:12px;
}
#contact #button{
    position:relative;
    right:0;
    bottom:0;
    padding:0 0 0 200px;
}
#contact #button a{
    padding:0 5px;
    text-align:right;
    background:green;
    cursor:pointer;
}
#contact form{
    border:1px solid #666;
    background:#dfdfdf;
    padding:10px;
    display:none;
}
form label {float:left;width:40%;}
form input[type=text] {float:left;width:50%;}
form input[type=text] {float:left;width:50%;}

查询

$(document).ready(function(){
    $('#contact a').on('click',function(){
        $('#contact form').slideToggle('slow');
    });
});