如何使用jQuery生成一个简单的弹出窗口

Question

如何使用jQuery生成一个简单的弹出窗口

我正在设计一个网页。当我们点击div命名邮件的内容时，如何显示包含标签电子邮件和文本框的弹出窗口？

Answer 1

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

Answer 2

查看jQuery UI对话框。你会像这样使用它：jQuery：$(document).ready(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$("#dialog").dialog();});标记：<div&nbsp;id="dialog"&nbsp;title="Dialog&nbsp;Title">I'm&nbsp;in&nbsp;a&nbsp;dialog</div>完成！请记住，这是关于最简单的用例，我建议阅读文档以更好地了解可以用它做什么。

Answer 3

我使用一个名为ColorBox的jQuery插件，它是非常好用轻量级定制我见过的jQuery最好的弹出对话框