1

I'm trying to implement the code found in the best answer to the following question: How to generate a simple popup using jQuery

Why will the following page of code below not work?

<html>
<head>
    <style type="text/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;
        }       
    </style>

      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
       <script>
        function deselect() {
            $(".pop").slideFadeToggle(function() { 
                $("#contact").removeClass("selected");
            });    
        }

        $(function() {
            $("#contact").live('click', function() {
                if($(this).hasClass("selected")) {
                    deselect();               
                } else {
                    $(this).addClass("selected");
                    $(".pop").slideFadeToggle(function() { 
                        $("#email").focus();
                    });
                }
                return false;
            });

            $(".close").live('click', function() {
                deselect();
                return false;
            });
        });

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

</head>

<body>

    <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>
</body>
</html>
Community
  • 1
  • 1
Andrew Heekin
  • 671
  • 1
  • 6
  • 15

1 Answers1

1

Frederic Hamidi commented first, but thought of including it as my answer since he didn't answer it.

Saw your edit. You are including jquery 1.9.1 where .live() is removed.

Use .on() instead.

Amit Joki
  • 58,320
  • 7
  • 77
  • 95