css 响应模态和媒体查询

hrysbysz 于 2023-02-01 发布在其他

关注(0)|答案(2)|浏览(123)

我希望有人能告诉我如何使这个react模式移动的响应。它没有使用 Bootstrap 。

<ReactModal 
            isOpen={this.state.showModal}
        style={{
            overlay: {
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0, 0, 0, 0.5)'
        },
            content: {
            position: 'absolute',
            top: 'auto',
            marginLeft: '70px',
            marginRight: '70px',
            bottom: '200px',
            border: '1px solid #ccc',
            background: '#000',
            overflow: 'auto',
            WebkitOverflowScrolling: 'touch',
            borderRadius: '10px',
            outline: 'none',
            padding: '20px'
        }
    }}>

css

来源：https://stackoverflow.com/questions/56027077/react-modal-and-media-queries

2条答案

按热度按时间

kmbjn2e31#

您将无法添加媒体查询到您的模态的内联样式。
要添加媒体查询，应使用类：
GitHub上的React模态演示：使用CSS类进行样式设置
然后你就可以在CSS中为不同类型的屏幕添加不同的样式。

赞(0）回复(0）举报 2023-02-01

wljmcqd82#

我不认为你可以在react-modal中嵌入媒体查询，但是你可以从window对象中获得一些属性，这些属性可以添加到内联样式中，如下所示：如果屏幕宽度小于768 px，这个例子将modal的宽度设置为98 vw，否则设置为默认宽度。

function isSmallScreen(): Boolean {
    if (typeof window !== 'undefined') {
        return window.innerWidth < 768;
    }
    return false;
}


return (
    <ReactModal
        isOpen={show}
        contentLabel="onRequestClose Example"
        onRequestClose={() => {
            setShowModal(!show)
            setIsLoading(false)
        }}
        shouldCloseOnOverlayClick={true}
        style={{
            content: {
                top: '50%',
                left: '50%',
                right: 'auto',
                bottom: 'auto',
                marginRight: '-50%',
                transform: 'translate(-50%, -50%)',
                height: '80vh',
                overflow: 'none',
                width: isSmallScreen() ? '98vw' : ''
            }
        }}
        ariaHideApp={false}
    >

赞(0）回复(0）举报 2023-02-01

我来回答

css 响应模态和媒体查询

2条答案

相关问题

热门标签

最新问答