0

I am looking at including a select list within a reveal modal window. I would like the custom forms styling to apply to the element but it appears to break when the element is within a reveal modal element. You see the original select list and underneath that the UL element it generates to replace it (without any styling applied)

<div id="divX" class="reveal-modal">

    <div class="large-4 columns">
      <label for="customDropdown1">Medium Example</label>
      <select id="customDropdown1" class="medium">
        <option DISABLED>This is a dropdown</option>
        <option>This is another option</option>
        <option>This is another option too</option>
        <option>Look, a third option</option>
      </select>
    </div>

</div>

I do have the class="custom" attribute on the form tag. When the select list is placed on the page outside of the reveal modal div it appears fine.

-Just to note I am using the latest Foundation 4.3.2 revision and the issue appears on both IE and Chrome. I have turned on script debugging and there are no errors reported.

4

2 回答 2

1

Zurb 建议将模式代码放在 html 标记的最底部，直接在 /body 标记上方。

由于 zurb 在此之前立即调用所有脚本，这会破坏某些功能。如果您将模态代码放在脚本调用之上，它们将正常运行。

考虑在文档完成时使用 jquery 来加载脚本，而不是在页面末尾调用所有内容，以使您的标记更清晰，更少混乱。

于 2013-11-06T19:00:38.167 回答
1 
<script>
    $(function () {
        $("#myZurbModal").foundation('reveal', {
            opened: function () {
                $(this).appendTo("form");
            }
        });
    });
</script>
于 2013-11-20T15:09:16.903 回答