Jquery 基础工作模式的建立

Jquery 基础工作模式的建立,jquery,html,css,zurb-foundation,Jquery,Html,Css,Zurb Foundation,所以我似乎可以让我的基础正常工作。它会弹出,但只出现在页面顶部,因此如果您向下滚动页面并尝试触发它,它将显示为已断开,因为它在页面顶部加载 触发器位于页面右侧,显示“儿童保育搜索” 下面是我用于模式的代码,但有些东西告诉我,不是HTML导致了问题 <div class="modal-btn"> <a href="#" data-reveal-id="myModal"><img src="<?php bloginfo('template_dire

所以我似乎可以让我的基础正常工作。它会弹出,但只出现在页面顶部,因此如果您向下滚动页面并尝试触发它,它将显示为已断开,因为它在页面顶部加载

触发器位于页面右侧,显示“儿童保育搜索”

下面是我用于模式的代码,但有些东西告诉我,不是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>
我在header.php中有这个加载,因为我需要在每个页面上加载它

你们遇到过这样的问题吗


您应该使模态
位置固定
,以确保其相对于视口顶部而不是文档顶部定位

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

您应该将模态
位置设置为固定的
,以确保其相对于视口顶部而不是文档顶部进行定位

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

听起来你需要固定模式
位置…换句话说,这是一个CSS问题。如果你想回答这个问题,我会继续给你一个很好的复选标记!谢谢,manIt听起来你需要将模态
定位为固定的
位置…换句话说,这是一个CSS问题。如果你想回答这个问题,我将继续并给你一个很好的复选标记!谢谢你,伙计