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>

No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.