Fui a un cuadro emergente como el cuadro de carga de estado de Facebook, pero no funciona, por eso intento mostrar CSS con bloque en línea y bloquear no funcionó. por favor, ayúdenme, ¿qué problema tiene mi código? Aparecí en un cuadro emergente como el cuadro de carga de estado de Facebook, pero no funciona. Por qué intento mostrar CSS con bloque en línea y bloquear no funcionó. por favor, ayúdame, ¿qué pasa con mi código?

 <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>