HTML/JS/CSS - Element won't get showed proplem : ***hey all, please do anyone know how to resolve my proplem (My element didn't get showed on Button click...) don't know the proplem*** 

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var modal = document.getElementById('comments-main');
    var btn = $("a#comments-btn");
    var span = $("close");
    btn.click = function() {
    	if(modal.style.display == 'block')
    	{
           modal.style.display = "none";
    	}
    	else 
    	{
    	   modal.style.display = "block";	
    	}
    } 
    span.onclick = function() {
    	if(modal.style.display == 'block')
    	{
           modal.style.display = "none";
    	}
    }
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
<!-- language: lang-css -->

    #comments-btn {
    	  float: left;
        margin-left: 50px;
    } 

    .comments-modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        -webkit-animation-name: fadeIn; /* Fade in the background */
        -webkit-animation-duration: 0.4s;
        animation-name: fadeIn;
        animation-duration: 0.4s;
    }

    .comments-content {
        position: fixed;
        bottom: 0;
        background-color: #fefefe;
        width: 100%;
    }

    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: red;
        text-decoration: none;
        cursor: pointer;
    }

    .comments-header {
        padding: 2px 16px;
        background-color: orange; /* #5cb85c */
        color: white;
        font-size: 15px;
        border-left: 1.5px solid black;
        border-right: 1.5px solid black;
        border-top: 1.5px solid black;  
        border-bottom: 1.5px solid black;
        border-radius:1px; 
        text-shadow: -1px 3px 3px white, 3px 4px 5px red, 6px 9px 12px black;
    }

    .comments-body {
        padding: 2px 16px;
        font-size: 15px; 
        font-style: italic;
        border-left: 1.5px solid black;
        border-right: 1.5px solid black;
        border-radius: 1px; 
    }

    .comments-modal-footer {
        padding: 2px 16px;
        background-color: orange;
        border-left: 1.5px solid black;
        border-right: 1.5px solid black;
        border-bottom: 1.5px solid black;
        border-radius:1px; 
    }

<!-- language: lang-html -->

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

    <div id="comments-main" class="comments-modal">
       <div class="comments-content">
          <div class="comments-header">
             <span class="close">&times;</span>
             <h2> Shikor - FB Comments </h2>
          </div>
          <div class="comments-body">
             <p>Facebook Comments Count: <span class="fb-comments-count" data-href="http://br-gaming.tk"></span></p><br />
             <center><div class="fb-comments" data-href="http://br-gaming.tk" data-width="600" data-numposts="5" data-colorscheme="dark"></div></center>
          </div>
          <div class="comments-modal-footer"></div>
       </div>
    </div> 

    <a class="w3-button w3-xlarge w3-circle w3-orange w3-card-4" id="comments-btn" href="#" onclick="return false;"><i class="fa fa-comments-o" aria-hidden="true"></i></a>

<!-- end snippet -->

which i try to click on the button it show nothing... please some help ???