Question

在我的渲染功能中，我有一个模态

的代码

<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问题。

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

Answer 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"));

React Bootstrap模式出现在背景

1 个答案: