Bootstrap Modal 坐在背景后面

2023-06-13前端开发问题

本文介绍了Bootstrap Modal 坐在背景后面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

所以我遇到的问题几乎与 @Jamescoo 是，但我认为我的问题在于我已经定位了几个 DIV 来创建一个滑动导航面板.

这是我复制的确切设置:http://jsfiddle.net/ZBQ8U/2/

奖励:如果您愿意，请随意获取滑动面板的代码 :)

z-indexes 不应该冲突，它们的值会显示它们正确堆叠，但在视觉上它们不是.

单击打开模态"按钮后，<div class="modal-backdrop fade in"></div> 将覆盖所有内容！(您必须重新运行代码才能重置它)

我不知道如何解决这个问题...有什么想法吗?

解决方案

只需将整个模式移到代码的其余部分之外，到最底部.它不需要嵌套在除主体之外的任何其他元素中.

<!-- 所有其他 HTML -->...</div><!-- 模态--><div class="模态淡入淡出" id="myModal">...</div></身体>

演示

他们在文档中暗示了这个解决方案.

<块引用>

模态标记放置
始终尝试将 modal 的 HTML 代码放在文档的顶级位置以避免其他组件影响模态框的外观和/或功能.

So I'm having nearly the exact same problem as @Jamescoo was but I think that my issue is coming from the fact that I have already positioned a couple of DIVs to create a sliding nav panel.

Here's my exact setup replicated: http://jsfiddle.net/ZBQ8U/2/

BONUS: Feel free to grab the code for the sliding panel if you'd like :)

The z-indexes shouldn't conflict and their values would show that they are stacking correctly, but visually they are not.

Once you click the 'Open Modal' button the <div class="modal-backdrop fade in"></div> covers everything! (you'll have to re-run the code to reset it)

I don't know quite how to remedy this one...Any ideas?

解决方案

Just move the entire modal outside of the rest of your code, to the very bottom. It doesn't need to be nested in any other element, other than the body.

<body>
    <!-- All other HTML -->
    <div>
        ...
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
        ...
    </div>
</body>

Demo

They hint at this solution in the documentation.

Modal Markup Placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

这篇关于Bootstrap Modal 坐在背景后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

layui 单选框、复选框、下拉菜单不显示问题如何解决？

1. 如果是ajax嵌套了页面，请确保只有最外层的页面引入了layui.css 和 layui.js ,内层页面切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...

2024-11-09 前端开发问题

313

layui要如何改变时间日历布局大小？

问题描述我想改变layui时间日历布局大小，这个要怎么操作呢？解决办法可以用css样式对时间日历进行重新布局，具体代码如下： !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...

2024-10-24 前端开发问题

271

相关推荐

layui 单选框、复选框、下拉菜单不显示问题如何解决？

layui要如何改变时间日历布局大小？

缩放背景图像以适合 ie8 窗口

IE7 (IETEster) 中的@fontface 无法正常工作

Safari 5.1 打破 CSS 表格单元格间距

如何使用 `on()` 委托 `hover()` 函数

热门文章

热门精品源码

最新VIP资源