Question 46100 in CSS Question posted in
Some basic documentation can be found here.

Create a transparent `fade in` and `fade out` popup using `css` display center of screen

Would like to create a transparent fade in and fade out popup using css display center of the screen. I have created one but is always displays bottom left of the screen. Could someone please advise ?

enter image description here

Tried the component way in react, but transition is not working for the popup

const Popup = () => {

    const style = {
      position: 'absolute',
      left: '50%',
      top: '50%',
      transform: 'translate(-50%,-50%)',
      width: '250px',
      height: '100px',
      borderRadius: '5px',
      backgroundColor: '#6d418c',
      opacity: 0.5,
      transition: 'all 250ms linear 2s'
    }
  
    return (
      <div>
        {createPortal(
          <div style={style} className={`alert alert-success ${ showLatestMailAlert ? 'alert-shown' : 'alert-hidden'}`}
            onTransitionEnd={() => setShowLatestMailAlert(false)}>
            <span class="popuptext" id="myPopup"><strong>Success!</strong> This child is placed in the document body.</span>
          </div>,
          document.body
        )}
      </div>
    ) 
  }

 return (
    <div id="App">
        <div className='parent'>
             <div className='adminSection'>
                <h1>Create a new blog</h1>
                <div className='row'>
                    <div className='createBlogSection'>

                        <div data-color-mode="dark" className='container'>
                            <MDEditor
                                className='reactEditorArea'
                                id="blogdetails"
                                name="blogdetails"
                                value={blogValue}
                                onChange={setBlogValue}
                            />
                            {/* <MDEditor.Markdown className='reactEditorOutput' source={blogValue} style={{ whiteSpace: 'pre-wrap' }} /> */}
                        </div>
                        <form>
                        <div className='row'>
                            <div className='tagsName'>
                                <label>Tags:</label>
                                <input
                                    type="text"
                                    id="tags"
                                    name="tags"
                                    placeholder="enter tags"
                                    value={tagValue}
                                    onChange={(e) => setTagValue(e.target.value)}     
                                />
                            </div>
                            {/* <span className="validationmsg">
                                {errors.tags && errors.tags.type === "required" && <span>Tag is required !</span>}
                                {errors.tags && <span>{errors.tags.message}</span>}
                            </span> */}
                        </div>
                        </form>                 
                        <label>
                         <span className="adminSuccessMsg">{helperText}</span>
                        </label>
                        <div className='row'>
                            <div className='submitSection'>
                                <input type="submit" onClick={onSubmit} className="submitBtn" />
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            
        </div>
       <Popup/>
    </div> 
)
Tags:

2

Answers


  1. 0

    Add following css properties to your .alert class

      position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
    Login or Signup to reply.
  2. 0

    You may need to remove the popup from the DOM flow, it depends on the parent elements. Their CSS may affect child’s position.

    For that you can use a portal

    const Popup = () => {

  const style = {
    position: 'absolute',
    left: '50%',
    top: '50%',
    transform: 'translate(-50%,-50%)'
  }

  return (
    <div>
      <p>This child is placed in the parent div.</p>
      {createPortal(
        <p style={style}>This child is placed in the document body.</p>,
        document.body
      )}
    </div>
  ) 
}

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search