Search code snippets, questions, articles...

Create modal popup CSS

Creating a simple modal popup using CSS that is centered vertically and horizontally
<div class="modal_wrap">
   <div class="modal">
      Here is modal text

    .modal_wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);

    .modal {
        position: absolute;
        min-height: 100px;
        width: 500px;
        max-width: 97%;
        background: #fff;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,.3);
Was this helpful?