2010-01-02 8 views
1

Je vais utiliser Facebox dans ma page, et je chargeais plugins suivants:Comment utiliser jQuery FaceBox

<script type="text/javascript" src="facebox.js"></script> 
<script language="javascript" src="jquery-min.js"></script> 
<link type="text/css" href="facebox.css" rel="stylesheet" /> 

J'ai deux éléments div. Je veux montrer un div dans le facebox après un événement onclick, et j'utilise cette commande après l'événement onclick

jQuery('#dialog-form').facebox() 

dialog-form est le div id montrer dans le Facebox, mais il est montrant les deux divs en la page et Facebox n'apparaissent pas. Comment puis-je atteindre cet objectif?

+1

Pouvez-vous écrire du code? –

Répondre

7

Il est peut-être que vous devez inclure le fichier jQuery avant le plugin:

<script type="text/javascript" src="jquery-min.js"></script> 
<script type="text/javascript" src="facebox.js"></script> 
3

Assurez-vous de référence jQuery premier. Ce qui suit a fonctionné pour moi très bien:

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="facebox/facebox.js"></script> 
    <link rel="stylesheet" type="text/css" href="facebox/facebox.css" /> 
    </head> 
    <body> 
    <a href="#dialog-form" rel="facebox">text</a> 
    <div id="dialog-form" style="display:none"> 
     <form method="post"> 
     <p><label>Username:</label> <input type="text" name="user" /></p> 
     <p><input type="submit" /></p> 
     </form> 
    </div> 
    <script type="text/javascript"> 
     $(function(){ 
     $('a[rel*=facebox]').facebox() 
     }); 
    </script> 
    </body> 
</html>