Question

我希望在基础显示中显示我的表单的一些字段以及提交按钮。

类似的东西：

<form action="" method="POST">
    {% csrf_token %}
        <div class="large-8 columns">
            <input type="text" name="name" label="name"></input>
        </div>

        <a href="" class="button" data-reveal-id="display_detail">Submit</a>

        <div id="display_detail" class="reveal-modal" data-reveal>

            <input type="text" name="age" label="name"></input>
            <input type="submit" value="Submit" class="button">
        </div>
</form>

但是当链接＆＃34;提交＆＃34;单击，我看到reveal-data div实际上放在表单之外。怎么能纠正这个？

Answer 1

为了确保Reveal模态实际悬停在页面上方，而不是在一些相对定位的元素内，必须将html移动到顶层body元素。

为了解决这个问题，我没有尝试入侵Reveal插件来阻止这种行为，而是将一个事件监听器添加到一个复制条目的新表单中：

<form action="" method="POST" id="baseform">
    {% csrf_token %}
    <div class="large-8 columns">
        <input type="text" name="name" label="name"></input>
    </div>

    <a href="" class="button" data-reveal-id="display_detail">Submit</a>


    <div>
        <!-- preferably hide this block using JS -->
        <input type="text" name="age" label="name"></input>
        <input type="submit" value="Submit" class="button">
    </div>
</form>

<div id="display_detail" class="reveal-modal" data-reveal>
    <form data-linked-form="baseform">
        <input type="text" name="age" label="name"></input>
        <input type="submit" value="Submit" class="button">
    </form>
</div>

然后使用coffeescript：

# duplicate values
$(document).on('input', 'form[data-linked-form]', (e)->
  form = e.currentTarget
  input = e.target
  document.forms[form.dataset.linkedForm].elements[input.name].value = input.value
)

# submit the linked form, instead of itself
$(document).on('sumit', 'form[data-linked-form]', (e)->
  form = e.target
  document.forms[form.dataset.linkedForm].submit
)

基础形式的某些领域显露出来

1 个答案: