Sunday, May 20, 2012

How to generate a simple popup using jQuery


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



I searched in Google for a simple popup in jQuery, but the code is weird.


Source: Tips4all
Post by On
Tags , , , ,

5 comments:

  1. UserMay 20, 2012 at 7:25 PM

    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(function() {
    $("#email").focus();
    });
    return false;
    });

    $(".close").live('click', function() {
    $(".pop").slideFadeToggle(function() {
    $("#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.

    ReplyDelete
  2. UserMay 20, 2012 at 7:25 PM

    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.

    ReplyDelete
  3. UserMay 20, 2012 at 7:25 PM

    I use a jQuery plugin called ColorBox, it is


    Very easy to use
    lightweight
    customizable
    the nicest popup dialog I have seen for jQuery yet

    ReplyDelete
  4. UserMay 20, 2012 at 7:25 PM

    Visit this url

    Jquery UI Dialog Demos

    ReplyDelete
  5. UserMay 20, 2012 at 7:25 PM

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

    ReplyDelete

Subscribe to: Post Comments (Atom)