如何使用jQuery facebox

时间:2010-01-02 05:41:30

标签: 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" />

我有两个div元素。我想在onc​​lick事件后在facebox中显示一个div,并且我在onclick事件后使用此命令

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

dialog-form是要在Facebox中显示的div ID,但是它显示了页面中的两个div并且没有出现Facebox。我怎样才能做到这一点?

2 个答案:

答案 0 :(得分:7)

可能需要在插件之前包含jQuery文件:

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

答案 1 :(得分:3)

请务必先引用jQuery。以下对我有用:

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