<div class="modal js-modal is-active" id="js-modal-sign-in">
    <div class="modal__toggle-wrap">
        <a href="#sign-in" class="modal__toggle is-active">Sign In</a>
        <a href="#sign-up" class="modal__toggle">Sign Up</a>
    </div><!--/.modal__toggle-wrap-->

    <form action="" class="modal__form">
        <div class="modal__form-text-input">
            <label for="Username">Username</label>
            <input type="text" placeholder="Username" value="Jane Doe" />
        </div>
        <div class="modal__form-text-input">
            <label for="Password">Password</label>
            <input type="text" placeholder="Password" value="••••••••"/>
        </div>
        <div class="modal__form-checkbox">
            <input type="checkbox" checked/><span>Keep me Signed in</span>
        </div><!--/.modal__form-checkbox-->
        <input type="submit" value="Sign In" class="modal__form-submit"/>
    </form><!--/.modal__form-->

    <div class="modal__footer">
        <a href="">Forgot Password?</a>
    </div><!--/.modal__footer-->
    
    <a href="#close-modal" class="modal__close js-modal-close">&#10005;</a>
</div><!--/.modal-->

<a href="#js-modal-sign-in" class="modal-open js-modal-open">Click Me</a>
// Variables
// ---------

// Colors
$grey-light:    #e6e6e6;
$grey:          #d0d0d0;
$white:         #ffffff;
$blue:          #1161ee;
$blue-grey:     #676d87;


// Demo Defaults
// -------------
body,
html{
  height:100%;
}

*{
  box-sizing:border-box;
}

body{
  background-image:-webkit-linear-gradient(top, $grey-light,  $grey);
  background-image:-moz-linear-gradient(top, $grey-light, $grey);
  font-family:Montserrat,sans-serif;
  position:fixed;
  width:100%;
}

a,
button,
input{
  transition:all .1s linear;
  text-decoration:none;
}


// Base Modal
// ----------
.modal {
    background-color: red;
    box-shadow: 0 20px 30px -10px rgba(0,0,0,0.75);
    height: 680px;
    left: calc(50% - 262.5px);
    opacity: 0;
    padding: 60px;
    position: fixed;
    top: 20%;
    transition: all .2s linear;
    visibility: hidden;
    width: 525px;
    z-index: 99;
    
    &.is-active {
        opacity: 1;
        top: calc(50% - 340px);
        visibility: visible;
    }
} // .modal


// Sign In Modal
// -------------
.modal {
  
    &__toggle-wrap {
        margin: 35px 0 90px 20px;
    } // .modal__toggle-wrap
  
    &__toggle {
        color: $blue-grey;
        font-size: 20px;
        margin-right: 40px;
        text-decoration: none;
        text-transform: uppercase;

        &:hover,
        &.is-active {
            border-bottom: 2px solid $blue;
            color: $white;
            padding-bottom: 5px;
        }
    } // .modal__toggle
  
    &__form {
        width: 100%;
    } // .modal__form

    &__form-text-input,
    &__form-checkbox{
        margin-bottom: 22px;
        width: 100%;
    }

    &__form-text-input {
      
        label,
        input {
            display: block;
        }

        label {
            color: #9595a1;
            font-size: 13px;
            margin-left: 20px;
            margin-bottom: 14px;
            text-transform: uppercase;
        } // label

        input {
            background-color: rgba(255,255,255, 0.1);
            border-radius: 25px;
            border: none;
            color: $white;
            font-size: 14px;
            padding: 10px;
            text-indent: 10px;
            width: 100%;

            &:focus {
                background-color: rgba(255,255,255, 0.3);
                outline: none;
            }
        } // input
    } // .modal__form-text-input

    &__form-checkbox {
        input {
            margin: 10px 10px 10px 20px;
        }
        span {
            color: $white;
            font-size: 14px;
        }
    } // .modal__form-checkbox

    &__form-submit {
        background-color: $blue;
        border-radius: 25px;
        border: none;
        color: $white;
        font-size: 14px;
        padding: 10px;
        text-align: center;
        text-transform: uppercase;
        width: 100%;

        &:hover {
            background-color: darken($blue, 10%);
        }
    } // .form__form-submit

    &__footer {
        border-top: 2px solid rgba(255,255,255,0.1);
        margin-top: 70px;
        padding-top: 40px;
        text-align: center;

        a {
            color: $blue-grey;
            font-size: 14px;
            text-decoration: none;
            transition: .1s all linear;

            &:hover {
                color: $white;
            }
        } // a
    } // .modal__footer
} // .modal


// Close Modal
// -----------
.modal__close {
    color: $blue-grey;
    font-size: 32px;
    line-height: 1;
    padding: 6px 10px 7px;
    position: absolute;
    right: 15px;
    text-decoration: none;
    top: 15px;
  
    &:hover {
        color: $white;
    }
} // .modal__close


// Modal Open
// ----------
.modal-open {
    background-color: $blue;
    box-shadow: 0 10px 12px -10px rgba(0,0,0,0.75);
    color: $white;
    left: calc(50% - 95px);
    padding: 20px 60px;
    position: fixed;
    text-transform: uppercase;
    top: calc(50% - 30px);
  
    &:hover {
        box-shadow: 0 7px 10px -10px rgba(0,0,0,0.75);
    }
} // .modal__open

// Base64 Encode Background Image Below
// ------------------------------------
.modal{background-image:url(data:image/jpeg;base64,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)}
View Compiled
// Open a modal based on the href of the button
function openModal(e) {
    e.preventDefault();
  
    var target = $(this).attr('href'),
        targetModal = $(target);
        isActive = 'is-active';
  
    targetModal.addClass(isActive);
}

// Remove the active class from the parent of
// the close modal button
function closeModal(e) {
    e.preventDefault();
  
    var modal = $(this).parent('.js-modal'),
        isActive = 'is-active';
  
    modal.removeClass(isActive);
}

// Open Modal on Click
$('body').on('click', '.js-modal-open', openModal);

// Close Modal on Click
$('body').on('click', '.js-modal-close', closeModal);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js