使用 Bootstrap Modal，您能否将页面的淡入淡出限制到页面的父 div，而不是整个正文? [英] With a Bootstrap Modal, can you restrict the fading of the page to a parent div of the page, and not to the whole body?

问题描述

我正在构建一个小游戏，我需要在游戏窗口"(一个 div)中显示一个模式，窗口的其余部分会淡出和变灰，但不是整个页面，界面仍然存在.

I'm building a small game and I need to make a modal appear in the game "window" (a div) and the rest of the window to fade and gray out, but not the whole page, where the interface remains.

有没有简单的方法来限制这个?

Is there a simple way to restrict this?

推荐答案

你必须使用 Bootstrap Modal 吗?如果是这样，需要一些技巧才能使其正常工作.但它肯定可以做到.你需要:

Do you have to use Bootstrap Modal? If so it will take some hackery to get it working properly. But it can certainly be done. You would need to:

1. 更改插入背景的位置.Boostrap Modal 会将背景附加到 document.body，因此您必须更改 js 文件以附加到(或可能插入)您想要覆盖的 div.
2. css 也需要更改.目前，背景样式仅使用固定位置覆盖整个窗口(边缘在 0, 0, 0. 0).您希望它只覆盖一个 div，这意味着从固定宽度更改为其他宽度.
3. 模态的 css 可能需要更改，具体取决于您希望它居中的位置等.

也许您可以尝试使用 BlockUI 进行元素阻塞.这似乎内置了您想要的内容?

Maybe you could try Element blocking with BlockUI. This seems to have what you want built in?

http://jquery.malsup.com/block/#element

不是这样，然后有许多示例可以阻止或覆盖页面的某些部分以进行加载和 ajaxy 类型操作.我会研究其中之一.

Id not that, then there are many examples of blocking or covering sections of a page for loading and ajaxy type operations. I would look into one of those.

这篇关于使用 Bootstrap Modal，您能否将页面的淡入淡出限制到页面的父 div，而不是整个正文?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！