У меня есть следующий код Я использовал bootstrap 4 и использую модальное окно для создания следующей формы, но щелчок за пределами его отключает. Мне нужно, чтобы, когда он активен, я мог нажимать на элементы снаружи.
Мне нужно перемещаться по карте, не отключая модальный.
при использовании
data-keyboard = "false" data-backdrop = "false"
Я не могу двигаться в фоновом режиме
.modal.right.fade.show .modal-dialog {
left: 0;
}
.modal.left .modal-dialog {
position: fixed;
left: 0;
margin: auto;
width: 400px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal-backdrop {
opacity: 0.0 !important;
}
.padding {
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="position: fixed; right: 0;">Modal</button>
<iframe style="width: 100%; height: 700px;" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d15906.095346250848!2d-74.1592274!3d4.6786168!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2sco!4v1596647912474!5m2!1ses!2sco" frameborder="0"
style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<!-- Modal -->
<div class="modal left fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-dismiss="modal" aria-label="Close" aria-selected="false">Cerrar</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="padding">
<h4>Busqueda por Texto</h4>
<div class="form-row">
<div class="col">
<input class="form-control" placeholder="Ingresa una palabra clave a buscar, codigo postal, ciudad">
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="padding">
<h4>Búsqueda Avanzada</h4>
<div class="form-row">
<div class="col">
<label>Departamento / Municipio:</label>
<input class="form-control" placeholder="Departamento">
</div>
</div>
<div class="form-row mt-1 mb-1">
<div class="col">
<input class="form-control" placeholder="Municipio">
</div>
</div>
<h6>Vía Principal</h6>
<div class="form-row mt-1">
<div class="col">
<input class="form-control" placeholder="Típo de Via">
</div>
<div class="col">
<input class="form-control" placeholder="Número">
</div>
<div class="col-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">Bis</label>
</div>
</div>
</div>
<div class="form-row mt-1 mb-1">
<div class="col">
<input class="form-control" placeholder="Letra">
</div>
<div class="col">
<input class="form-control" placeholder="Cuadrante">
</div>
</div>
<h6>Vía Generadora</h6>
<div class="form-row mt-1">
<div class="col">
<input class="form-control" placeholder="Número">
</div>
<div class="col">
<input class="form-control" placeholder="Letra">
</div>
<div class="col">
<input class="form-control" placeholder="Número">
</div>
<div class="col">
<input class="form-control" placeholder="Cuadrante">
</div>
</div>
<div class="row mt-2">
<div class="col">
<button class="btn btn-primary btn-block">Guardar</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>