Fancybox link is opening the main window

I have the following HTML for opening a fancybox window:

<div class ="centeral">
 <a class='button2' href="#addnewmodal" id="addnewbutton"> Add New Dashboard Widget </a>
 <div id="ajaxmessage"></div>
 </div>
 <div class='addnewmodal' style="display: none;">
    <form id="adddashboarditemform" method="post" action="">
    <p id="form_error">All fields are required</p>
    <p>
        <label for="widgetname">Widget Name: </label>
        <input type="text" id="widgetname" name="widgetname" size="30" />
    </p>
    <p>
        <label for="rsssource">RSS Source: </label>
        <input type="text" id="rsssource" name="rsssource" size="80" />
    </p>
    <p>
        <label for="items">Items to Read: </label>
        <input type="text" id="items" name="items" size="3" />
    </p>
    <p>
        <input type="submit" value="addnewbuttonsubmit" />
    </p>
</form>
 </div>

and the following script inside the jquery ready 开发者_如何学JAVAfunction:

 $("#addnewbutton").fancybox();

For some reason when i click the link it opens a new window with the exact same contents of the parent window and does not show the form at all.

You had your href referring to id addnewmodal but it is instead set as a class.
You may also need to wrap your modal div in another div to set display to none instead of setting itself as display none.

<div style="display:none">
  <div id="addnewmodal" class="addnewmodal">
    <form id="adddashboarditemform" method="post" action="">
    <p id="form_error">All fields are required</p>
    <p>
        <label for="widgetname">Widget Name: </label>
        <input type="text" id="widgetname" name="widgetname" size="30" />
    </p>
    <p>
        <label for="rsssource">RSS Source: </label>
        <input type="text" id="rsssource" name="rsssource" size="80" />
    </p>
    <p>
        <label for="items">Items to Read: </label>
        <input type="text" id="items" name="items" size="3" />
    </p>
    <p>
        <input type="submit" value="addnewbuttonsubmit" />
    </p>
    </form>
  </div>
</div>