Create custom popup using jquery

How to create custom popup alert box in jquery: 

It's required CSS because CSS provide a property of the display: none and position property. Here is available an example with HTML, CSS & Jquery.

HTML Code:

<div id="wrapperPop"></div>

<div id="innerPop">Please enter your name.

    <div id="okPop">OK</div>

</div>

<div class="test">click</div>

<h1>Test new pop up</h1>

CSS Code:

<style>

    #wrapperPop {

        background: rgba(0, 0, 0, .5);

        position: fixed;

        width: 100%;

        height: 100%;

        display: none;

    }

    #innerPop {

        background: #2f88d0;

        border-radius: 0 20px 0 20px;

        padding: 20px 10px 40px;

        position: absolute;

        width: 280px;

        height: auto;

        left: 50%;

        top: 10%;

        margin-left: -140px;

        color: #fff;

        text-align: center;

        border: 1px solid #3ea3f5;

        box-shadow: 0 0 2px 0 #555;

        display: none;

    }

    #okPop {

        border-radius: 50%;

        width: 40px;

        height: 40px;

        font-size: 14px;

        font-weight: bold;

        left: 50%;

        margin-left: -20px;

        line-height: 40px;

        position: absolute;

        bottom: -20px;

        background: #eee;

        cursor: pointer;

        color: #000;

    }

</style>

Jquery Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>

    $(document).ready(function () {

        $(".test").click(function () {

            $("#wrapperPop, #innerPop").css("display", "block"); });

            $("#okPop,#wrapperPop").click(function () {

                $("#wrapperPop, #innerPop").css("display", "none");

            });

        });

</script>