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 ready函数中的以下脚本：

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

出于某种原因，当我点击链接时，它会打开一个新窗口，其中包含与父窗口完全相同的内容，并且根本不显示该窗体。

Answer 1

你的href引用了id addnewmodal，但它被设置为一个类。
您可能还需要将模态div包装在另一个div中，以将display设置为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>

Fancybox链接打开主窗口

1 个答案: