Background color did not quit when clicking the CSS close button

Question

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

But when I click the close icon the image comes out but the background color does not.

HTML

<div id="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.

Answer 1

You have 3 problems with your code:

1. Change

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

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

2nd. Interchange

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

For:

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

The close is a class and not a id.

So this part of the code goes like this:

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

3rd. Interchange:

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

For:

$(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>
<link rel="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>

Answer 2

You did not inform which Modal Plugin is using or if you are using the jQuery UI... Anyway you are starting the Window via Javascript and closing track CSS, that there is in the counter hand... you have to understand the working structure of the class modal() to close this window via CSS, if you are using the method 'show' of the modal class, use the method 'close' of the class also Uai:

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

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