Background color did not go out when clicking the close CSS button

Navigation
0

I'm developing a web application using Html, CSS, Jquery, and every time the page is loaded a modal appears with an image.

ButwhenIclickthecloseicontheimageexitsbutthebackgroundcolordoesnot.

HTML

<divid="boxes">
<div id="dialog" class="window">
<a href="#" class="close">x</a><br />
    <!-- Adicione o nome da imagem aqui -->
<img width="300" src="imagens/bolos.JPG" border="0">
</div>
<!-- Máscara para cobrir a tela -->
<div id="mask"></div>
</div>

JS 

<script type="text/javascript">

   $(window).load(function() {
$('#dialog').modal('show');


  });

    $( "#close" ).click(function() {
   $("#mask").css("display", "none");
});

  $(document).ready(function() {  

    $('a[name=modal]').click(function(e) {
    e.preventDefault();

    var id = $(this).attr('href');

    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    $('#mask').css({'width':maskWidth,'height':maskHeight});

    $('#mask').fadeIn(1000);
            //Escolha a opacidade do fundo
    $('#mask').fadeTo("slow",0.8);  

    //Obeter o tamanho da janela
    var winH = $(window).height();
    var winW = $(window).width();

    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);
    $(id).fadeIn(1000); 

});

$('.window .close').click(function (e) {
    e.preventDefault();
    $('#mask').hide();
    $('.window').hide();
});     

$('#mask').click(function () {
    $(this).hide();
       $('.window').hide();
    });         

 });

CSS 

    <style type="text/css">

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

    #mask {
   position:absolute;
  left:0;
 top:0;
 z-index:9000;
 background-color:#aaa2a2;
 display:none;
 }

  #boxes .window {
 position:absolute;
 left:0;
 top:0;
  width:0px;
 height:0px;
 display:none;
 z-index:9999;
  padding:20px;
 }

#boxes #dialog {
 position:absolute;
 width:675px;
 height:453px;
 padding:10px;
left: 80%;

}

  .close{

  color: #FFF;
  font-family: sans-serif;
  padding-top: 4px;
  right: 50%;
 }

  </style>

Error.

    
asked by anonymous 31.01.2018 / 00:36

2 answers

1

You have 3 problems with your code:

1st. Switch

$("#mask").css("display", "none"); by $('#dialog').modal('hide');

  

In fact, this <div id="mask"></div> is not having any   utility. Bootstrap itself already has a native transparent background   for the modal.

2nd. Switch 

$( "#close" ).click(function() {

By: 

$( ".close" ).click(function() {

The close is a class and not a id .

Then this part of the code looks like this: 

$( ".close" ).click(function() {
   $('#dialog').modal('hide');
});

3rd. Switch: 

$(window).load(function() {
   $('#dialog').modal('show');
});

By: 

$(window).on('load', function() {
   $('#dialog').modal('show');
});

Example for reference: 

$(window).on('load',function() {
   $('#dialog').modal('show');
});

$(document).on('click', '.close, .modal-backdrop',function() {
   $('#dialog').modal('hide');
});
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#boxes #dialog {
   position:absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
   z-index: 999999;
}

.close{
   color: #fff;
   font-family: sans-serif;
   right: -20px;
   top: -20px;
   position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div id="boxes">
   <div id="dialog">
      <a href="#" class="close">x</a>
         <!-- Adicione o nome da imagem aqui -->
         <img width="300" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"border="0">
   </div>
</div>
    
31.01.2018 / 00:58
0

You have not informed which Modal Plugin you are using or if you are using the jQuery UI Modal ... anyway you are starting the Window via JavaScript and closing via CSS , this is against the other hand ... you have to understand the working structure of the modal() class to close this window via CSS , if you are using method 'show' of modal class, use method 'close' of class also uai: 

$( "#dialog" ).dialog( "close" );

This is already in the class for you to use, you do not need to terminate via CSS, doing this you will duplicating code unnecessarily.

    
31.01.2018 / 00:54
How do I put an image in Itextsharp? CSS - How to remove lines around the button?