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

您应该制作模态position的{{1}}，以确保它相对于视口的顶部而不是文档的顶部定位。

fixed

让基础Modal正常工作

1 个答案: