Jqueryモーダル表示について

ここまで書いたのですがモーダル部分が反応しません。理由は何でしょうか・・？

<!DOCTYPE html>
<html>
    <head>
        <title>It's only me?</title>
        <link rel="stylesheet" type="text/css" href="its_only_me.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>
<body>
    <nav>
        <ul>
            <li id="home">Home</li>
            <li id="about">About"Only me?"</li>
            <li>Post your "only me?"</li>
        </ul>
    </nav>
    <div id="modal-about"></div>
<script>
    $(function(){
        $('#about').click(function(){
            $("body").append('<div id="modal-bg"></div>');
            modalResize();
            
            $("#modal-about","#modal-bg").fadeIn("slow");
            
            $("#modal-about","#modal-bg").click(function(){
                $("#modal-about","#modal-bg").fadeOut("slow",function(){
                    $('modal-bg').remove();
                });
            });
            
        });
    });
</script>
</body>
</html>

//css部分

html,body{
    height:100%;
}
body{
    padding:0px;
    margin:0px;
}
ul{
    list-style: none;
    padding: 0px;
    margin:0px;
    overflow: hidden;
}
li{
    display:block;
    float:left;
    padding:10px 30px;
    font-size: 20px;
}
li:hover{
    background-color: black;
    color:white;
    cursor: pointer;
}
#modal-about{
    display:none;
    width:500px;
    height:300px;
    margin:0;
    padding:0;
    background-color:#ffffff;
    position:fixed;
}
#modal-bg{
    display:none;
    width:100%;
    height:100%;
    
}