How to generate a simple popup using 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?

回答1:

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

回答2:

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.

回答3:

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

回答4:

Visit this url

Jquery UI Dialog Demos

回答5:

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

回答6:

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

回答7:

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

回答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.

回答9:

Simple popup window by using html5 and 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();  
            };
        })();

回答10:

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.

回答11:

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