如何使用jQuery生成一个简单的popup窗口
我正在devise一个网页。 当我们点击div命名邮件的内容时，如何显示包含标签电子邮件和文本框的popup窗口？
这个简单的东西不需要插件。 这可能看起来像很多代码，但它非常简单。
首先是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>
这里是一个jsfiddle演示和实现。
根据情况，您可能需要通过ajax调用来加载popup窗口内容。 如果可能，最好避免这种情况，因为在看到内容之前可能会给用户更多的延迟。 如果你采取这种方法，这里你会想要做的一些改变。
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; });
查看jQuery UI对话框 。 你会这样使用它：
jQuery：
$(document).ready(function() { $("#dialog").dialog(); });
标记：
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
完成！
请记住，这是最简单的用例，我build议阅读文档 ，以更好地了解可以做什么。
我使用了一个名为ColorBox的jQuery插件
- 非常容易使用
- 轻量级
- 定制
- 我已经看到了jQuery的最好的popup对话框
访问这个url
JQuery UI对话演示
尝试Magnific Popup ，它的响应和重量只有3KB左右。
我认为这是写一个简单的jQuery的popup窗口很好的教程 。 再加上它看起来非常漂亮
这里有一个很好的简单的例子： http : //www.queness.com/post/77/simple-jquery-modal-window-tutorial
极轻量级的Modalpopup式插件。 POPELT – http://welbour.com/labs/popelt/
它是轻量级的，支持嵌套popup窗口，面向对象，支持dynamicbutton，响应等等。 下一次更新将包括popupAjax表单提交等
随意使用和鸣叫反馈。
通过使用html5和javascript简单的popup窗口。
HTML： –
<dialog id="window"> <h3>Sample Dialog!</h3> <p>Lorem ipsum dolor sit amet</p> <button id="exit">Close Dialog</button> </dialog> <button id="show">Show Dialog</button>
JavaScript的： –
(function() { var dialog = document.getElementById('window'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('exit').onclick = function() { dialog.close(); }; })();
这是一个非常简单的popup窗口：
<!DOCTYPE html> <html> <head> <style> #modal { position:absolute; background:gray; padding:8px; } #content { background:white; padding:20px; } #close { position:absolute; background:url(close.png); width:24px; height:27px; top:-7px; right:-7px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> var modal = (function(){ // Generate the HTML and add it to the document $modal = $('<div id="modal"></div>'); $content = $('<div id="content"></div>'); $close = $('<a id="close" href="#"></a>'); $modal.hide(); $modal.append($content, $close); $(document).ready(function(){ $('body').append($modal); }); $close.click(function(e){ e.preventDefault(); $modal.hide(); $content.empty(); }); // Open the modal return function (content) { $content.html(content); // Center the modal in the viewport $modal.css({ top: ($(window).height() - $modal.outerHeight()) / 2, left: ($(window).width() - $modal.outerWidth()) / 2 }); $modal.show(); }; }()); // Wait until the DOM has loaded before querying the document $(document).ready(function(){ $('a#popup').click(function(e){ modal("<p>This is popup's content.</p>"); e.preventDefault(); }); }); </script> </head> <body> <a id='popup' href='#'>Simple popup</a> </body> </html>
更灵活的解决scheme可以在本教程中find： http ： //www.jacklmoore.com/notes/jquery-modal-tutorial/这里是close.png的示例。
只有CSSpopup窗口逻辑！ 试试吧。 简单！ 我认为这个mybe会在未来受到欢迎
<a href="#openModal">OPEN</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" class="close">X</a> <h2>MODAL</h2> </div> </div> .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; } .modalDialog:target { display: block; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); }
