Buat dialog modal dengan jquery dan css

Setelah googling mencari cara yang paling sederhana untuk buat modal dengan css dan jquery, akhirnya selsai juga. Ini hasilnya saya coba bagi dan tentunya setelah di edit sana-sini.
Untuk menampilkan dialog modal ini saya menggunakan cara memanggil class dari html ketika modal ditampilkan dan membuang class html tersebut ketika modal di tutup melalui jquery.

Pertama-tama buat dulu css-nya seperti ini

    .boxbg{
        position: relative;
        background-color: white;
        color: black;
        font-size: 16px;
        border: 1px solid gray;
        padding: 10px;
        display:block;
        position: absolute;
        top: 10%;
        left: 35%;
        width: 300px;
        height: 450px;
        /* overflow-y: scroll; */
    }

    .testwe {
        background-color: black;
        opacity: 90%;
        filter:alpha(opacity=90);
        background-color: rgba(0,0,0,0.90);
        width: 100%;
        min-height: 100%;
        overflow: hidden;
        float: absolute;
        position: fixed;
        top: 0;
        left: 0;
        color: white;
    }

    .closebtn {
        width: 20px;
        height: 20px;
        padding: 5px 5px;
        clear: both;
        white-space: nowrap;
        margin-top: -40px;
        margin-right: -40px;
        float: right;
        top: 100;
        display: inline-block;
        color: #fff;
        text-decoration: none;
        background: #0081c2;
        -webkit-border-radius: 5px 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
    }
   
    .closebtn:hover {
        cursor: pointer;
        font-weight: bold;
    }


Kemudian buat script jquery   

    <!-- sesuaikan link ke folder file dan nama file .js dengan sistem folder agan-agan -->
    <script src="jquery-1.10.2.js"></script>

    <script>
    $(document).ready(function(){
        $("#boxtengah").hide();  /* sembunyikan isi box yang akan ditampilkan */
       
        /* buat triger untuk menampilkan box modal */

        $(".cobaklik").click(function(){
            $("#boxtengah").addClass("boxbg").show();
            $("#boxmodal").addClass("testwe");
        });
       
       /* ini kode jquery untuk menutup box modal */
       /* mengunakan cara membuang class html digunakan */
        $(".closebtn").click(function(){
            $("#boxtengah").removeClass("boxbg").hide();
            $("#boxmodal").removeClass("testwe");
        });
    }); 


Untuk yang terakhir buat kode HTML seperti ini.

    <span class="cobaklik">
        <p>klik disini untuk lihat Demo modal</p>
    </span>
   
    <div id="boxmodal"></div>
    <div id="boxtengah">
        <span class="closebtn" title="Close" id="closebtn">X</span>
        <p style="clear:both; color:blue; white-space: nowrap;">Silahkan agan2 isi untuk kontenya.<br>Sekian. Semoga bermanfaat :)</p>
    </div>

Ya seperti itu lah jadinya. Selamat mencoba, moga bermanfaat.