如何使用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

其他回答

极其轻量级的模态弹出插件。 POPELT - http://welbour.com/labs/popelt/

它是轻量级的，支持嵌套弹出窗口，面向对象，支持动态按钮，响应式等等。下一次更新将包括弹出Ajax表单提交等。

请随意使用并发布反馈。

2013-10-14 19:36:30

让我们试试....如何创建一个简单的弹出窗口使用HTML, CSS和jquery…

$(function() { // Open Popup $('[popup-open]').on('click', function() { var popup_name = $(this).attr('popup-open'); $('[popup-name="' + popup_name + '"]').fadeIn(300); }); // Close Popup $('[popup-close]').on('click', function() { var popup_name = $(this).attr('popup-close'); $('[popup-name="' + popup_name + '"]').fadeOut(300); }); // Close Popup When Click Outside $('.popup').on('click', function() { var popup_name = $(this).find('[popup-close]').attr('popup-close'); $('[popup-name="' + popup_name + '"]').fadeOut(300); }).children().click(function() { return false; }); }); body { font-family:Arial, Helvetica, sans-serif; } p { font-size: 16px; line-height: 26px; letter-spacing: 0.5px; color: #484848; } /* Popup Open button */ .open-button{ color:#FFF; background:#0066CC; padding:10px; text-decoration:none; border:1px solid #0157ad; border-radius:3px; } .open-button:hover{ background:#01478e; } .popup { position:fixed; top:0px; left:0px; background:rgba(0,0,0,0.75); width:100%; height:100%; display:none; } /* Popup inner div */ .popup-content { width: 700px; margin: 0 auto; box-sizing: border-box; padding: 40px; margin-top: 100px; box-shadow: 0px 2px 6px rgba(0,0,0,1); border-radius: 3px; background: #fff; position: relative; } /* Popup close button */ .close-button { width: 25px; height: 25px; position: absolute; top: -10px; right: -10px; border-radius: 20px; background: rgba(0,0,0,0.8); font-size: 20px; text-align: center; color: #fff; text-decoration:none; } .close-button:hover { background: rgba(0,0,0,1); } @media screen and (max-width: 720px) { .popup-content { width:90%; } } <!DOCTYPE html> <html> <head> <title> Popup </title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <a class="open-button" popup-open="popup-1" href="javascript:void(0)"> Popup Preview</a> <div class="popup" popup-name="popup-1"> <div class="popup-content"> <h2>Title of Popup </h2> <p>Popup 1 content will be here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat diam ut tortor dignissim, vel accumsan libero venenatis. Nunc pretium volutpat convallis. Integer at metus eget neque hendrerit vestibulum. Aenean vel mattis purus. Fusce condimentum auctor tellus eget ullamcorper. Vestibulum sagittis pharetra tellus mollis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a class="close-button" popup-close="popup-1" href="javascript:void(0)">x</a> </div> </div> </body> </html>

2020-11-25 04:36:48

简单的弹出窗口，使用html5和javascript。

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();  
            };
        })();

2016-06-04 09:55:50

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

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

2009-08-25 17:05:57

首先，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调用加载弹出式内容。如果可能的话，最好避免这种情况，因为它可能会让用户在看到内容之前有更大的延迟。如果您采用这种方法，这里有一些您需要做的更改。

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;
});

2009-08-25 17:03:51

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

推荐文章

最新文章

标签