让基础模式正常工作

Question

所以我似乎可以让我的 foundation5 模式正常工作。它正在弹出，但仅在页面顶部弹出，因此如果您向下滚动页面并尝试触发它，它将显示为已损坏，因为它在页面顶部加载它

触发器位于显示儿童保育搜索的页面右侧。

这是我用于模态的代码，但有些东西告诉我这不是导致问题的 HTML

    <div class="modal-btn">
    <a href="#" data-reveal-id="myModal"><img src="<?php bloginfo('template_directory'); ?>/assets/images/search-tab.png"></a>
</div>

<div id="myModal" class="reveal-modal medium" data-reveal="" aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <h2 id="modalTitle">With over 400 Child Care Aware centers across the United States we are here to help you find the right care for your child. To locate a center near you use the search below:</h2>

    <ul class="tabs" data-tab="">
        <li class="tab-title active"><a href="#panel1">Tab 1</a></li>

        <li class="tab-title"><a href="#panel2">Tab 2</a></li>

        <li class="tab-title"><a href="#panel3">Tab 3</a></li>

        <li class="tab-title"><a href="#panel4">Tab 4</a></li>
    </ul>

    <div class="tabs-content">
        <div class="content active" id="panel1">
            <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
        </div>

        <div class="content" id="panel2">
            <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
        </div>

        <div class="content" id="panel3">
            <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
        </div>

        <div class="content" id="panel4">
            <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
        </div>
    </div><a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

这是我为此添加的唯一 CSS。

.modal-btn {
    position: fixed;
    right: 0;
    top: 42%;
    z-index: 999;
    -webkit-transform: translateZ(0);
}

.reveal-modal {
    background-color: #f1a026;
    border: none;
}

.reveal-modal .close-reveal-modal {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    top: -12px;
    right: -10px;
    background: #f1a026;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    text-align: center;
}

h2#modalTitle {
    color: #fff;
    font-size: 19px;
    font-weight: 400;
}

我在 header.php 中加载了这个，因为我需要在每个页面上加载它。

你们有没有运行遇到过这样的问题？

http://www.usachildcareaware.org.php53-11.dfw1-1.websitetestlink.com/

Answer 1

您应该使模态 fixed 的 position 确保它相对于视口顶部而不是文档顶部定位。

.reveal-modal {
    background-color: #f1a026;
    border: none;
    position: fixed;
}

让基础模式正常工作

Getting foundation Modal to work right

html

css

jquery

zurb-foundation