Question

我正在考虑在显示模式窗口中包含一个选择列表。我希望将自定义表单样式应用于元素，但是当元素位于显示模式元素内时，它似乎会中断。您会看到原始选择列表，并在其下方生成的UL元素替换它（未应用任何样式）

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

我在表单标记上有class =“custom”属性。当选择列表放在显示模式div之外的页面上时，它看起来很好。

- 请注意我使用的是最新的Foundation 4.3.2修订版，问题出现在IE和Chrome上。我已打开脚本调试，并且没有报告错误。

Answer 1

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

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

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

Answer 2

<script>
    $(function () {
        $("#myZurbModal").foundation('reveal', {
            opened: function () {
                $(this).appendTo("form");
            }
        });
    });
</script>

基金会Zurb选择列表显示莫代尔失败的风格

2 个答案: