保持在表单内的 JQuery Div 弹出覆盖

Question

我目前正在使用一个运行良好的 jquery 弹出式覆盖 (https://github.com/vast-engineering/jquery-popup-overlay)，但我注意到它存在一个破坏站点的错误。

弹出框设置在表单中，但 jquery 代码将其重新定位到代码顶部，就在开始的正文标记下方。

标准html代码：

<div id="my_popup2">
  <table border="0" cellpadding="0" cellspacing="0" class="blackbaroptions" >
    <tr>
      <td ><strong>Page Title:</strong></td>
      <td ><input type="text" name="content_titlepage" class="pageTitlelong" value="<?php echo htmlentities($row_Recordset1['content_titlepage'], ENT_COMPAT, 'utf-8'); ?>" /></td>
    </tr>
    <tr>
      <td ><strong> Description:</strong></td>
      <td ><input type="text" name="content_description" class="pageTitlelong" value="<?php echo htmlentities($row_Recordset1['content_description'], ENT_COMPAT, 'utf-8'); ?>" /></td>
    </tr>
    <tr>
      <td><strong>Keywords:</strong></td>
      <td><input type="text" name="content_keywords" class="pageTitlelong" value="<?php echo htmlentities($row_Recordset1['content_keywords'], ENT_COMPAT, 'utf-8'); ?>" /></td>
    </tr>
    <tr>
      <td></td>
      <td><button class="my_popup2_close exturlclose" style="margin-top:5px;">Close</button></td>
    </tr>
  </table>

以及触发它的 jquery：

$('#my_popup2').popup({
        vertical:'top',
        offsettop:60,
        transition: 'all 0.3s',
        autozindex: true,
        color:'#000'
    });

如果我注释掉它完美地提交到表单的开始和结束 div 标签。但是当它像以前一样运行并且我在 Chrome 中“检查元素”时，它会将其转移到代码的最顶部。

因此，当用户单击提交时，它不会将其保留在表单中，也不会在其中提交数据。

有谁知道我该如何解决这个问题，或者我是否可以用它来代替不会改变代码的那个？

Answer 1

弹出窗口放置在它所在的位置，以便它可以绝对定位在所有元素之上。这是无法改变的。

您需要做的是挂钩弹出窗口的事件之一（根据您所说的可能是onclose），然后将弹出窗口输入中的值传输到form 中的隐藏字段.像这样的：

$('#my_popup2').popup({
    vertical:'top',
    offsettop:60,
    transition: 'all 0.3s',
    autozindex: true,
    color:'#000',
    onclose: function() {
        $('#hiddenPageTitleLong').val($('#my_popup .pageTitlelong').val());
    };
});