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

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

当前回答

这是一个非常简单的弹出窗口:

<!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>

更灵活的解决方案可以在本教程中找到:http://www.jacklmoore.com/notes/jquery-modal-tutorial/ 这里是示例的close.png。

2013-10-12 20:31:20

其他回答

尝试一下Magnific Popup，它反应灵敏，重量只有3KB左右。

2013-05-24 16:10:59

我认为这是一个编写简单jquery弹出窗口的很好的教程。而且它看起来很漂亮

2012-07-27 09:03:17

访问这个网址

Jquery UI对话框演示

2012-03-03 01:00:22

我使用的是一个叫做ColorBox的jQuery插件

非常容易使用轻量级可定制的这是我见过的jQuery最好的弹出对话框