I went popup box like Facebook status upload box but it does not work why I try to CSS display with inline-block and block it did not work. please help me what wrong with my code I went popup box like Facebook status upload box but it does not work why I try to CSS display with inline-block and block it did not work. please help me what wrong with my code

<div class="upload-idea">
  <button class="ui-i" d="myBtn"  >Upload Ideas</button>
  <div class="modal" id="myModal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <select name="cobcategory" class="ui-c" >
        <option> -Chose Category- </option>
        <?php 
          $rselect="SELECT * FROM Category";
          $rresult=mysqli_query($connect,$rselect);
          $rcount=mysqli_num_rows($rresult);
          for($i=0;$i<$rcount;$i++)   
          {
            $rrows=mysqli_fetch_array($rresult);
            $roleid=$rrows['CID'];
            $rolename=$rrows['Category_Name'];
            echo "<option value='$roleid'>$rolename</option>"; 
          }
        ?>
      </select>
    </div>
  </div>
</div>

<script>
  var modal = document.getElementById("myModal");
  var btn = document.getElementById("myBtn");
  var span = document.getElementsByClassName("close")[0];
  btn.onclick = function() {
    modal.style.display = "inline-block";
  }
  span.onclick = function() {
    modal.style.display = "none";
  }
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>
<style>
  .modal {
    display:inline-block;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
  }
</style>