JANELA MODAL BLOQUEANDO EM TELA MOBILE

[Juinior Oliveira 0]

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

[Juinior Oliveira 0]

Ola pessoal passando pra informa que eu consegui resolver o meu problema porem não sei se seria a forma correta de fazer

mais deu certo..

Fiz da seguinte maneira

                        Se estiver errado a minha maneira que fiz, se alguém estiver uma solução mais tese fico grato..

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

  }
  
.modal-meio {
    background-color: <?php echo ConfigPainel('cor_modal_mobile'); ?>;
      color:white !important;
      text-align: center;
      font-size: <?php echo ConfigPainel('mobile_fonte'); ?>px;
  height: <?php echo ConfigPainel('altura_destktop'); ?>px;
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;  
  }
  .modal-footer {
      background-color: #f9f9f9;
  }
  
  </style> 
 <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>

<!-- CÓDIGO MODAL -->
<!-- Modal -->
  <div class="modal fade" id="myModalDesktop" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
          
        <div class="modal-header mobile-hide" style="padding: 50px 70px;"> <!-- aqui recebe o BANNER que vai aparecer no DESKTOP -->
</div>
		<div class="btn-group btn-group-justified mobile desktop-hide modal-meio media d-block d-md-flex text-md-left text-center"  style="padding: 70px 70px;">
	<img src="<?php echo ConfigPainel('base_url'); ?>/css_js/images/logo/<?php echo ConfigPainel('logo'); ?>"
		     width="<?php echo ConfigPainel('mobile_largura'); ?>%" class="img-fluid d-md-flex mr-4 border border-white lis-border-width-4 rounded mb-4 mb-md-0" alt="" />
                        
		   <center><p>
		      <?php echo ConfigPainel('titulo1_mobile'); ?></br> 		         
		      <?php echo ConfigPainel('titulo2_mobile'); ?> 
		       </p>
           </center>

        </div>
        </div>
      <button type="button" class="label label-danger mobile-hide" data-dismiss="modal">Fechar</button>
     <center><button type="button" class="label label-danger mobile desktop-hide" data-dismiss="modal">Fechar</button></center>
      </div> </div>

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


</script>