Hola mi problema es que se me bloquea la pantalla al abrir un modal, aparece un fondo oscuro, lo raro es que el mismo procedimiento lo he hecho en proyectos anteriores y con exito. ESTE ES MI MODAL, ESTE ES MI CODIGO COMPLETO HTML, LA CUAL PINTO PRIMERO MI ABLA CON SUS FILTROS POR FECHA Y LUEGO UN DIV CON SU MODAL LA CUAL SE ME BLOQUEA AL LOGRAR ABRIRLO A TRAVES DE JAVASCRIPT, necesito ayuda con este problema, me parece raro el bloqueo.
<section class="section-container">
<!-- Page content-->
<div class="content-wrapper">
<div class="content-heading">
<div>Órdenes</div>
</div><!-- START card-->
<div class="row">
<div class="col-md-4">
<h6 style="font-weight: bold; margin-left:
30px;">Desde: </h6>
<div class="col-xl-8 col-10">
<div class="input-group date"
id="datetimepicker1">
<input class="form-control"
id="fecha1"
type="date" value="<?= $fecha1 ?>" >
<span class="input-group-append
<input-
group-addon">
<span class="input-group-text fa
fa-
calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<h6 style="font-weight: bold; margin-left:
30px;">Hasta: </h6>
<div class="col-xl-8 col-10">
<div class="input-group date"
id="datetimepicker2">
<input class="form-control" id="fecha2"
type="date" value="<?= $fecha2 ?>" >
<span class="input-group-append input-
group-addon">
<span class="input-group-text fa fa-
calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<button type="button" onclick="filtrar()" class="btn
btn-dark" style="margin-top: 27px">
<i class="fa fa-search"></i>BUSCAR</button>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<!-- START card-->
<div class="card card-default">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<table id="Data-ordenes" class="table table-striped
table-bordered table-hover">
<thead>
<tr>
<th>Incio traslado</th>
<th>Fin traslado</th>
<th>Motivo</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Unidad</th>
<th>Id Destinatario</th>
<th>Nombre Destinatario</th>
<th>destino</th>
<th>Chofer</th>
<th>CI Chofer</th>
<th>Nombre camión</th>
<th>Placa</th>
<th>Estado</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="ordenes-completado">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div><!-- END card-->
</div>
</div><!-- END row-->
<!-- START card-->
</div>
</section><!-- Page footer-->
<!-- The Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" >
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="submit">Guardar</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
ABRO EL MODAL CON LA SIGUIENTE LINEA DE CODIGO A TRAVES DE JAVASCRIPT
$("#myModal").modal();