小编mor*_*i23的帖子

我刚刚创建了一个按钮,一旦点击就会弹出一个模态,每个按钮都有一个显示不同运动gif的模态.但是模态太小而且它阻止用户看到整个gif,迫使它们向下滚动.我想删除滚动条并使模态更大,以便用户可以看到整个gif.任何帮助都会很棒,这是我的codepen https://codepen.io/anon/pen/gPwved

HTML

 <div id="modal1" class="modal">
    <div class="modal-content">
      <h4></h4>
      <p></p>
    </div>
    <div class="modal-footer">
      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

jQuery-我创建了6个具有不同id的单击函数,这是其中一个的示例,如果需要整个代码,请查看我的codepen

$("#chest").on("click", function() {
       $("h4").html("Bench Press");
        $("p").html("<img id='yo' src='https://45.media.tumblr.com/860edb05e3f8b0bf9b4313a819e87699/tumblr_mi2ud72e931qet17vo1_400.gif'>");
        $("#modal1").openModal("show");
    });

我想弄清楚如何将我的<h4>标签和<button标签并排放置。

当前行为- 现在它们在我的图像下方，我希望它们处于水平位置。

必需的行为- 我希望<h4>与图像<button>并排，并与<h4>.

我尝试向右浮动并显示块，但元素仍然在图像下方且彼此之间。

代码笔链接

我有一个着陆页，上面有我网站的标题、一个子标题和一个按钮。我固定了背景图像，background-attachment以便在向上滚动时保持原位。

我希望我的标题、子标题和按钮保持原位，以便概览部分与其重叠。我尝试将文本设置为固定位置并制作z-index: -1，但它位于背景图像后面并出现在概览部分中。 https://codepen.io/anon/pen/qmdzzz

文本被包裹在intro-textdiv 中

@media (min-width: 768px){
  header .intro-text {
    padding-top: 300px;
    padding-bottom: 200px;
    position: fixed;
    z-index: -1
  }
}

然后我尝试为概述部分设置更高的 z-index

#overview {
  z-index: 1000; 
}