我正在设计一个网页。当我们单击名为mail的div的内容时,如何显示一个包含标签电子邮件和文本框的弹出窗口?
首先是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 class="messagepop pop"> <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 class="close" href="/">Cancel</a></p> </form> </div> <a href="/contact" id="contact">Contact Us</a>
根据情况,您可能需要通过ajax调用来加载弹出内容。最好避免这种情况,因为这可能会给用户带来更大的延迟,使他们无法观看内容。如果采用这种方法,您将在此处进行一些更改。
HTML变成:
<div> <div class="messagepop pop"></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; });