html

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
   </div><!--/.modal-->
</div><!--/modal_wrap-->

<style>
    .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);
    }
</style>

Was this helpful?