Close Modal Popup

  

Response obtained from this question link

A solution as suggested by the aforementioned answer to remove the class fade of the modal or to do what you do, a manual removal of classes

Now if we connect to your code this would be a solution.

If even applying your function CerrarPopup() leaves your template blocked it is because you still need to delete the class modal-open of body

$('body').removeClass('modal-open');

Therefore your function would be like this:

function CierraPopup() {
  $("#popupBusquedaParroquia").modal('hide');//ocultamos el modal
  $('body').removeClass('modal-open');//eliminamos la clase del body para poder hacer scroll
  $('.modal-backdrop').remove();//eliminamos el backdrop del modal
}

Edit:

You are initiating a click when it is not necessary, as this becomes too much code and can generate errors or malfunction. Therefore it is better to remove it

$(document).ready(iniciar);

function iniciar() {
    $("#busqueda_parroquia tr td").click(clickTabla);
}

The way you're hiding the modal is not correct. What you do is hide the html of the div that contains the modal and then delete the html of .modal-backdrop . You should use the javascript functions that boostrap offers.

According to the official bootstrap documentation , the methods to show and hide modals are:

Show modal:

$('#myModal').modal('show')

Hide modal:

$('#myModal').modal('hide')

To hide the modal, if you have previously done a show you should only have to call hide .

Dear so you do not have to remove classes let the same modal take care of that. I recommend you place this code in your application. For the Javascript part.

$(document).ready(iniciar);

function iniciar() {
$("#busqueda_parroquia tr td").click(clickTabla);
}

$(document).ready(function () {
var table = $('#busqueda_parroquia').DataTable();
var dato = "";
//para seleccionar una opcion
$('#example tbody').on('click', 'tr', function () {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
        dato = "";
        console.log(dato);
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
        dato = $(this).find("td:eq(0)").text();
        console.log(dato);
    }
});
});

$("#BusquedaParroquia").on('click', 'tr', function (e) {
e.preventDefault();
var renglon = $(this);
var campo1, campo2, campo3;
$(this).children("td").each(function (i) {
    switch (i) {
        case 0:
            campo1 = $(this).text();
            break;
        case 1:
            campo2 = $(this).text();
            break;
        case 2:
            campo3 = $(this).text();
            break;
    }
})
$("#txt_codigo").val(campo1);
$("#txt_nombre").val(campo2);
if (campo3 == "A") {
    $("#che_estado").prop("checked", "checked");
}
CierraPopup();
});

function CierraPopup() {
$('#cerrar').click(); //Esto simula un click sobre el botón close de la modal, por lo que no se debe preocupar por qué clases agregar o qué clases sacar.
$('.modal-backdrop').remove();//eliminamos el backdrop del modal
}

For the part of your modal all you have to do is give an id to the close button. One thing like that:

<!-- Modal Escenario-->
<div class="modal fade" id="popupBusquedaParroquia" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
            <h4 class="modal-title" id="myModalLabel">Busqueda de Parroquias</h4>
        </div>
        <div id="BusquedaParroquia" class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label for="stock_bodega">Busqueda por:</label>
                    <select class="form-control" style="width: 40%" id="stock_bodega">
                        <option>Nombre</option>
                    </select>
                    <label for="texto_buscar">Texto a Buscar:</label>
                    <input type="text" class="form-control" id="texto_buscar">
                </div>
                <div style="position: relative; overflow: auto; width: 100%; height: 200px;" class="dataTables_scrollBody">
                    <table style="width: 100%;" id="busqueda_parroquia" class="display nowrap dataTable no-footer" cellspacing="0" width="100">
                        <thead>
                            <tr>
                                <th>Codigo</th>
                                <th>Nombre</th>
                                <th>Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                              <td>001</td>
                              <td>La Troncal</td>
                              <td>A</td>
                            </tr>
                            <tr>
                              <td>002</td>
                              <td>San Joose</td>
                              <td>A</td>
                            </tr>
                         </tbody>
                    </table>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">Seleccionar</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" id="cerrar">Cerrar</button>
        </div>
    </div>
</div>
</div>  <!-- Modal Escenario-->

I hope I have helped you in your project. Greetings!

You can simply delete it, for example like this:

$ ('. fade'). remove ();

$ ('body'). removeClass ('modal-open');