JANELA MODAL BLOQUEANDO EM TELA MOBILE

Ola boa tarde

poderia me informar de como resolver um problema  em meu código modal!

no computador ele fecha normalmente..

mais em tela mobile  quando vou fechar ele fica uma mascara por cima atrapalhando mecher no site como menus etc...

segue o código

STYLE

 <style>
 // COMPUTADOR
 .modal-header, h4, .close {
 background-image: url("<?php echo ConfigPainel('site_url'); ?>/modal_imagem/<?php echo ConfigPainel('img_modal'); ?>");
 background-color: #5cb85c;
 color:white !important;
 text-align: center;
 font-size: 20px;
 height: 280px;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

 }
 // MOBILE
 .modal-meio {
 background-color: rgba(0, 0, 0, 0.6);
 color:white !important;
 text-align: center;
 font-size: 20px;
 height: 280px;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 }
 .modal-footer {
 background-color: #f9f9f9;
 }

 </style>

	    Este é o STYLO onde faz com que a div abre em desktop 

	e no mobile

 <style>
 @media only screen and (max-width: 400px) {
 .mobile-hide{ display: none !important; }
 }
 @media only screen and (max-width: 400px) {
 .mobile{ display: inline !important; }
 }
 @media only screen and (min-width: 500px) {
 .desktop-hide{ display: none !important; }
 }
 </style>

	 

	 

	                               Este é o código do modal

<!-- COMEÇO MODAL APP -->
<!-- Modal computador -->

 <div class="modal fade" id="myModalDesktop" role="dialog">
 <div class="modal-dialog">
 <div class="mobile-hide">
 <!-- Modal content-->
 <div class="modal-content">
 <div class="modal-header" style="padding: 50px 70px;">
</div>

 </div>
 </div>
 </div> </div>

 <!-- Modal Mobile-->
 <div class="modal fade mobile" id="myModalMobile" role="dialog">
 <div class="modal-dialog desktop-hide">
 <div class="modal-content">
 <div class="modal-meio" style="padding: 70px 70px;">
 <center><p>
 <?php echo ConfigPainel('titulo1_mobile'); ?></br>
 <?php echo ConfigPainel('titulo2_mobile'); ?>
 </p>
 </center>

 </div>

 </div>
 </div>
 </div> </div>

	 

	este outro é o script que da o show pra que o modal abre

	fiz um para o desktop e outro para o mobile

	    pois tentei usar o mesmo mais não abria o do mobile

	 

<script>
$(document).ready(function(){
 // Show the Modal on load
 $("#myModalDesktop").modal("show");

});

</script>

<script>
$(document).ready(function(){
 // Show the Modal on load
 $("#myModalMobile").modal("show");

});

</script>

	      Se puderem me informa de como resolver o problema fico grato

	 

	 

	    Obs: Como eu disse ele fica uma mascara preta transparente quando clica fora pra fechar ele, ele fechar o banner dele, mais fica a tal mascara bloqueando em mexer no site por ex: menu entre outras coisas

	 

	  quero que quando clicar fora dele ele liberar a tela para mexer normal