小编hos*_*seh的帖子

居中对齐模态ReactJS

我正在尝试在 ReactJS 中设计模式,并需要一些帮助。我在尝试居中对齐内容模式时遇到困难。另外,在设置模态样式时,是否可以指定一个className并在css页面中对其进行样式设置?我已经尝试这样做,但它不起作用。所以我决定做内联样式,但我无法居中对齐我的模式。

            <button onClick={()=> SEOsetModalIsOpen(true)} className="viewmore">
                View More
                <ArrowIcon className="arrowright"/>
            </button>
            <Modal
              isOpen={SEOmodalIsOpen}
              shouldCloseOnOverlayClick={true}
              onRequestClose={()=>SEOsetModalIsOpen(false)}
              style={{
                  overlay: {
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    opacity: 1,
                  },

                  content: {
                    position: 'absolute',
                    width: '500px',
                    height: '300px',
                    top: '200px',
                    left: '500px',
                    right: '500px',
                    bottom: '200px',
                    border: '1px solid #ccc',
                    background: 'blue',
                    overflow: 'auto',
                    WebkitOverflowScrolling: 'touch',
                    borderRadius: '4px',
                    outline: 'none',
                    padding: '20px'
                  }
              }}
              >
              <h2>Search Engine Optimisation</h2>
              <p>Hello World</p>
              <button onClick={()=>SEOsetModalIsOpen(false)}>Close</button>
            </Modal>
            </div>
Run Code Online (Sandbox Code Playgroud)

css modal-dialog popup center-align reactjs

3
推荐指数
1
解决办法
1万
查看次数

几秒后隐藏 div ReactJS

我试图在 ReactJS 上几秒钟后隐藏一个 div 。到目前为止,这是我的代码:

setTimeout(function() {
    $('#submitmsg').fadeOut('fast');
}, 3000);

<div id="submitmsg">
    {message && <span> Messaged received. I'll respond to your query ASAP!  </span> }
 </div>
Run Code Online (Sandbox Code Playgroud)

我收到一个错误,说“$”未定义。

transition hide reactjs

2
推荐指数
1
解决办法
1万
查看次数

标签 统计

reactjs ×2

center-align ×1

css ×1

hide ×1

modal-dialog ×1

popup ×1

transition ×1