Ссылка Fancybox открывает главное окно

Question

У меня есть следующий HTML-код для открытия окна fancybox:

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

и следующий скрипт внутри функции готовности jquery:

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

По какой-то причине, когда я щелкаю ссылку, открывается новое окно с точно таким же содержимым родительского окна и вообще не отображается форма.

Answer 1

Ваш href ссылается на id addnewmodal, но вместо этого он задан как класс.Вам также может понадобиться обернуть ваш модальный div в другой div, чтобы установить отображение на none вместо того, чтобы устанавливать себя как 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>