Wie mehrere Popups machen mit JQuery

Question

Für Pop-up im

den folgenden Code verwenden

Stil: Ich

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

und schließlich

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

:

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

JavaScript müssen ein anderes enthalten er erscheint, wenn der Registerlink angeklickt wird.

Ob ich die gleiche Funktion mit Modifikationen oder separaten Funktionen verwenden soll. Bitte geben Sie den Code mit Änderungen an. Ich bin so seltsam. Hilf mir.

Answer 1

würde ich tun genau das gleiche, aber die Chance, Informationen so:

$(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"); 
      $("#register").removeClass("selected"); 
      return false; 
     }); 

     $("#register").live('click', function(event) { 
      $(this).addClass("selected").parent().append(
      '<div class="messagepop pop"><form method="post" id="new_register" action="/register">The details and form here<input type="submit" value="Submit" name="commit" id="register_submit"/> or <a class="close" href="/">Cancel</a></p></form></div>'); 
      $(".pop").slideFadeToggle() 
      $("#whateverisyourfirstbox").focus(); 
      return false; 
     }); 
    }); 

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

Dies ist nur Ihr Beispiel wegzulaufen. Ich hoffe, dass die Tutorials, auf die ich in meiner letzten Antwort für Sie hingewiesen habe, helfen.

Answer 2

Ich benutze FlowPlayers jquery tools.Ich schlage vor, Sie können sie auch verwenden. Es gibt eine Übersicht über Overlay-Tool, die nahe ist, was Sie suchen, denke ich. Overlay Example