csdnceshi53
Lotus@
采纳率50%
2009-08-25 14:37

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

I am designing a web page. When we click the content of div named mail, how can I show a popup window containing a label email and text box?

转载于:https://stackoverflow.com/questions/1328723/how-to-generate-a-simple-popup-using-jquery

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

10条回答

  • csdnceshi75 衫裤跑路 12年前

    First the CSS - tweak this however you like:

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

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

    And finally the 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>
    

    Here is a jsfiddle demo and implementation.

    Depending on the situation you may want to load the popup content via an ajax call. It's best to avoid this if possible as it may give the user a more significant delay before seeing the content. Here couple changes that you'll want to make if you take this approach.

    HTML becomes:

    <div>
        <div class="messagepop pop"></div> 
        <a href="/contact" id="contact">Contact Us</a>
    </div>
    

    And the general idea of the JavaScript becomes:

    $("#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;
    });
    
    点赞 20 评论 复制链接分享
  • csdnceshi64 游.程 9年前

    Visit this url

    Jquery UI Dialog Demos

    点赞 10 评论 复制链接分享
  • csdnceshi50 三生石@ 12年前

    I use a jQuery plugin called ColorBox, it is

    1. Very easy to use
    2. lightweight
    3. customizable
    4. the nicest popup dialog I have seen for jQuery yet
    点赞 9 评论 复制链接分享
  • weixin_41568208 北城已荒凉 9年前

    I think this is a great tutorial on writing a simple jquery popup. Plus it looks very beautiful

    点赞 6 评论 复制链接分享
  • weixin_41568126 乱世@小熊 12年前

    Check out jQuery UI Dialog. You would use it like this:

    The jQuery:

    $(document).ready(function() {
        $("#dialog").dialog();
    });
    

    The markup:

    <div id="dialog" title="Dialog Title">I'm in a dialog</div>
    

    Done!

    Bear in mind that's about the simplest use-case there is, I would suggest reading the documentation to get a better idea of just what can be done with it.

    点赞 6 评论 复制链接分享
  • csdnceshi76 斗士狗 8年前

    Try the Magnific Popup, it's responsive and weights just around 3KB.

    点赞 4 评论 复制链接分享
  • csdnceshi62 csdnceshi62 12年前

    There is a good, simple example of exactly this, here: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

    点赞 3 评论 复制链接分享
  • weixin_41568183 零零乙 8年前

    Extremely Lightweight Modal popup plugin. POPELT - http://welbour.com/labs/popelt/

    It is lightweight, supports nested popups, object oriented, supports dynamic buttons, responsive, and lot more. Next update will include Popup Ajax form submissions etc.

    Feel free to use and tweet feedback.

    点赞 2 评论 复制链接分享
  • csdnceshi57 perhaps? 8年前

    Here is a very simple 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>
    

    More flexible solution can be found in this tutorial: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Here's close.png for the sample.

    点赞 评论 复制链接分享
  • csdnceshi55 ~Onlooker 5年前

    ONLY CSS POPUP LOGIC! TRY DO IT . EASY! I think this mybe be hack popular in future

                <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);
    }
    
    点赞 评论 复制链接分享