modal close

by karin

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<span class="fa-stack">
  <i class="fa fa-circle-o fa-stack-2x "></i>
  <i class="fa fa-times fa-stack-1x "></i>
</span>

<div id="open">open</div>

<div id="body">
    <div class="page"></div>
</div>

CSS

.overlay {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    z-index:999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*display: none;*/
}
.myModal {
    width: 30em;
    background: #EDFAC5;
    border: thin solid #ddd;
    z-index: 1000;
    position: fixed;
    left: 50%;
    top: 40%;
    margin-left: -15em;
    padding: 2em;
    font-size: 1.2em;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; 
}
    .myModal .fa-spin {
        margin:0 1em 0 0.2em;
    }

#closeModal {
    text-align:right;
    float:right;
    width:4em;
    margin:-2em -2em 0 0;
    font-size:0.8em;
}
#body{
    border:thin solid #333;
    height:300px;
}

JavaScript

$('#open').on('click', function () {
      
        $("#body").prepend("<div class=\"overlay\"></div>");

        $(".overlay").css({
            "position": "absolute",
            "width": $(document).width(),
            "height": $(document).height(),
        }).fadeTo(0, 0.8);

        $('<div class="myModal"><div id="closeModal"><span class="fa-stack"><i class="fa fa-circle-o fa-stack-2x"></i><i class="fa fa-times fa-stack-1x"></i></span></div>Please be patient...</div>').appendTo('.page');
        $('<i class="fa fa-spinner fa-2x fa-spin"></i>').prependTo('.myModal');


        $("#closeModal").on("click", function () {
            $(".myModal").remove();
            $('.overlay').remove();
        });
    });