Question

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

 $("#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.

Answer 1

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>