代码之家 › 专栏 › 技术社区 › user982124

页面滚动时如何在屏幕上显示固定引导模式?

twitter-bootstrap-3 html javascript

user982124 · 技术社区 · 6 年前

我有一个按钮可以触发引导模式来显示。我刚刚注意到当页面向下滚动时,模式不可见。当你点击按钮来显示模式时,背景会像平时一样变成灰色,但是模式没有显示出来——就像它在页面的最顶端一样,但是你看不到它。

我暂时将按钮移动到页面顶部,这很好,但是当按钮位于页面底部时,模式将不可见。

这是我的模式代码:

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Delete Person</h4>
      </div>
      <div class="modal-body">
        <p>Do you wish to delete this Person?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <a href="#" id="deletePersonLink"><button type="button" class="btn btn-danger">Delete</button></a>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

下面是显示模式的按钮:

<button class="btn btn-default" type="button" data-toggle="modal" data-rec-id="1580" data-target="#myModal"><span class="glyphicon glyphicon-trash"></span> Delete</button>

1 回复 | 直到 6 年前

Seunghaekim 6 年前

检查 position 其样式的属性。将值更改为 fixed 从 absolute 或 relative 这有助于解决你的问题。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前