React Bootstrap 模态出现在背景下答案

【问题标题】：React Bootstrap modal appearing under backgroundReact Bootstrap 模态出现在背景下
【发布时间】：2016-02-12 20:25:18
【问题描述】：

在我的渲染函数中，我有以下模态代码

<div id="newListModal" className="modal fade" role="dialog">
    <div className="modal-dialog">
        <div className="modal-content">
            <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal">&times;</button>
                <h4 className="modal-title">Create new list</h4>
            </div>
            <div className="modal-body">
                <p>Select category</p>
            </div>
            <div className="modal-footer">
                <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

所有包含的标签都以默认方式定位。

但是，当我点击触发模态的按钮时，模态出现在背景下。

由于我没有特殊的标签定位，我假设这是一个 React 问题。

关于为什么会发生这种情况的任何想法？

【问题讨论】：

z-index 问题或者您在页面中间的某处有模态，将模态放在页面末尾靠近页脚的位置，或者最好在关闭正文标签</body>之前放置模态。
Bootstrap 的哪个版本？ 3.3.4+ 的 an issue on the GitHub project 看起来相关，并且在 v3 中被关闭为“无法修复”。还有a PR 试图修复它。

标签： javascript html twitter-bootstrap reactjs

【解决方案1】：

问题是您的背景和模态都位于root div 下。所以你可以通过单独创建另一个 div 来解决这个问题。

index.html

<html>
<body>
     <div id="root"></div>
        <div id="list-modal"></div>
</body>
</html>

ListModal.js（组件）

return ReactDOM.createPortal(<div id="newListModal" className="modal fade" role="dialog">
    <div className="modal-dialog">
        <div className="modal-content">
            <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal">&times;</button>
                <h4 className="modal-title">Create new list</h4>
            </div>
            <div className="modal-body">
                <p>Select category</p>
            </div>
            <div className="modal-footer">
                <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>,document.getElementById("list-modal"));

【讨论】：