How to generate simple pop up using Jquery

Question

I am designing a web page. In that when we click the content of div named mail, a popup window should be shown containing a label email and text box. I searched in google as simple popup in Jquery but the code is weird. Please help me by providing very simple jquery pop up.

Answer 1

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.

Answer 2

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

Answer 3

Something this simple doesn't need a plugin. This might look like a lot of code but it's really pretty simple.

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() {
        $("#contact").live('click', function(event) {
            $(this).addClass("selected").parent().append('<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>');
            $(".pop").slideFadeToggle()
            $("#email").focus();
            return false;
        });

        $(".close").live('click', function() {
            $(".pop").slideFadeToggle();
            $("#contact").removeClass("selected");
            return false;
        });
    });

    $.fn.slideFadeToggle = function(easing, callback) {
        return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
    };

The appending of the div is an ajax call in my app - you might want to change the append code.

And finally the html:

<a href="/contact" id="contact">Contact Us</a>

Hopefully this code is less weird for you.

Answer 4

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

http://colorpowered.com/colorbox/

Answer 5

Try out TopUp:

http://gettopup.com

It’s jQuery (soon also Prototype) based and meant to be setup with great ease. The easiest setup is only to include one(!) external Javascript file. It uses one image sprite per layout and doesn’t require a separate stylesheet file to reduce the amount of requests.

The (pixel perfect) look-and-feel is Apple-like with a dashboard and quicklook layout. You can display images, Youtube content, Flash (SWF and FLV), iframes, Ajax content, QuickTime, Windows Media and RealPlayer movies! Display them separately or grouped.

So check it out and give it a try, implementing stylish pop-ups has never been so easy! ;)

Answer 6

@Paul Engel: Do you know who created TopUp? ;)