We Keep Coding

Bootstrap modal is sitting behind backdrop in Vue

When I try to add a modal in a component, the backdrop is coming to front and modal is behind it as below. I checked all the position css properties in the parent components. I found nowhere that used position: fixed, relative or absolute.
My code is as below,
<template>
<div
class="modal p-4"
id="confirmModal"
tabindex="-1"
data-bs-backdrop="static"
data-bs-keyboard="false"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered p-4 modal-xl">
<div class="modal-content p-4">
<div class="modal-body text-center">
<p class="my-5">No Images</p>
</div>
</div>
</div>
</div>
</template>
<script>
import bootstrap from "bootstrap/dist/js/bootstrap.min.js";
export default {
name: "ConfirmationDialog",
mounted() {
this.openViewer();
},
methods: {
openViewer() {
var myModal = new bootstrap.Modal(document.getElementById("confirmModal"), {
keyboard: false,
});
myModal.show();
},
},
};
</script>
Please, help me to solve this issue.

I found a solution.
Appending modal to body will solve the problem.
So, change the openViewer method as below,
openViewer() {
const modal = document.getElementById("confirmModal");
document.body.appendChild(modal);
var myModal = new bootstrap.Modal(modal, {
keyboard: false,
});
myModal.show();
},

Google Maps Search Box with autocomplete in Modal

Is it possible to have the Google Maps search box with autocomplete in a modal?
Not the whole map, just the search box.
Something like this:

Hours later seems that I found out a way to do it :)
HTML:
<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="md-form ml-0 mr-0">
<!-- Autocomplete location search input -->
<div class="form-group">
<label>Τοποθεσία:</label>
<input type="text" class="form-control" id="search_input" placeholder="Αναζήτηση διεύθυνσης..." />
<input type="hidden" id="loc_lat" />
<input type="hidden" id="loc_long" />
</div>
<!-- Display latitude and longitude -->
<div class="latlong-view">
<p style="text-align: center;">
<b>Latitude:</b>
<span id="latitude_view"></span>
<b>| Longitude:</b>
<span id="longitude_view"></span>
</p>
</div>
</div>
<div class="text-center mt-4">
<button class="btn btn-cyan waves-effect waves-light" onclick="goTo()" style=" font-size: 1.2rem;">
<i class="fa fa-search ml-1"></i>
</button>
</div>
</div>
</div>
</div>
Javascript:
/* Google Maps Search handler */
var searchInput = 'search_input';
$(document).ready(function() {
var autocomplete;
autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), {
types: ['geocode'],
componentRestrictions: {
country: "GR"
}
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var near_place = autocomplete.getPlace();
document.getElementById('loc_lat').value = near_place.geometry.location.lat();
document.getElementById('loc_long').value = near_place.geometry.location.lng();
document.getElementById('latitude_view').innerHTML = near_place.geometry.location.lat();
document.getElementById('longitude_view').innerHTML = near_place.geometry.location.lng();
});
});
$(document).on('change', '#' + searchInput, function() {
document.getElementById('latitude_view').innerHTML = '';
document.getElementById('longitude_view').innerHTML = '';
});
/* Google Maps - Go to searched location */
function goTo() {
var lat = Number(document.getElementById("latitude_view").innerText);
var lon = Number(document.getElementById("longitude_view").innerText);
console.log(lat);
console.log(lon);
if (lat != 0 && lon != 0) {
map.setCenter({
lat: lat,
lng: lon
});
map.setZoom(18);
} else
alert("Μη αποδεκτές συντεταγμένες");
}
/* END of Google Maps Search handler */
Please note that you have to use the places library in order to make it work.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initMap"></script>

Bootstrap Popup with Dynamic Width as per content

I have created bootstrap modal, and appending some html through AJAX...
I am not able to show perfect width as per content. I have tried:
width: 'auto'; //it looks as in Screenshot
width: 100%; //it takes whole page width
It looks like:
var PopupHelper = {
Show: function () {
$("#popup_content").empty();
var qAjax = new AjaxHelper("/Services/Service.asmx/GetCurrentPopupContent");
qAjax.OnSuccess = function (data) {
$("#popup_content").html(data);
$('#popup-Model').css({ 'width' : 'auto','overflow': 'auto' });
$("#popup-Model").modal();
}
qAjax.Init();
}
}
<!--Popup Window -->
<div class="modal fade" id="popup-Model" 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" aria-hidden="true" style="margin-top:-10px !important">×</button>
</div>
<div class="modal-body" id="popup_content">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--Popup Window -->
How to make modal width, as per the content inside modal-body?
NOTE: modal HTML shown in image can vary
Thanks!!!

Since you're already using javascript to render this modal, it will be easier to just set the modal-dialog width to the same width as your content. It's hard to do this only with CSS because modal-dialog have fixed width (varying per screen size).
$("#popup_content").html(data);
$("#popup-Model").modal();
setTimeout(() => {
//change div:first-child to whatever your first child is
var width = $("#popup_content div:first-child").width() + 30; //Padding
$(".modal .modal-dialog").css({ 'width' : width+'px' });
}, 0); //Maybe you'll need a longer timeout because of css transitions
working example
Worked in OP case as:
$("#popup_content").empty();
var qAjax = new AjaxHelper("/Services/Service.asmx/GetCurrentPopupContent");
qAjax.OnSuccess = function (data) {
$("#popup_content").html('<div class="test-div">' + data + '</div>');
$("#popup-Model").modal();
setTimeout(function () {
//change div:first-child to whatever your first child is
var width = $("#popup_content div:first-child").width() + 50; //padding
$(".modal-dialog").css({ 'width': width + 'px' });
$('#popup-Model').css({ 'overflow': 'auto' });
}, 500);

add row and col-* class in your popup to handle content
<!--Popup Window -->
<div class="modal fade" id="popup-Model" 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" aria-hidden="true" style="margin-top:-10px !important">×</button>
</div>
<div class="modal-body">
<div class="col-xs-12" id="popup_content"></div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--Popup Window -->

try to use min-width and position:relative style to "model-body" class. I hope it will work.

Load content dynamically in bootstrap 2.3 modal

I am doing some modifications with twitter bootstrap modal and I am trying to achieve dynamic image loading in modal window. Also when the certain image is loaded I would like to be able to swipe between images. Can anyone help me with this one?
Here is structure:
<!-- Image trigger -->
<div class="item">
<a data-toggle="modal" href="#myModal" class="modal-trigger">
<img src="img/7.jpg" alt="">
</a>
</div>
<!-- Modal window -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- it makes empty spaces clickable -->
<div type="button" class="close" data-dismiss="modal" aria-hidden="true"> </div>
<img data-dismiss="modal" aria-hidden="true" src="http://placehold.it/800x670" class="image" alt="" data-target="#myModal"></div>
And here is javascript for swipe feature:
$(document).ready(function() {
// Swipe feature
$("#myCarousel").swiperight(function() {
$("#myCarousel").carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$("#myCarousel").carousel('next');
});

You have to write several methods / functions for each task.
var yourApp = window.yourApp || {};
yourApp.initModal = function (options) {
$('a.js-modal').on('click' function (event) {
$('#myModal').modal(options);
event.preventDefault();
});
};
yourApp.loadModalContent = function () {
var content = $("#modalContent").html();
if (content.length) {
$('#myModal').html(content);
}
};
yourApp.initCarouselSwipe = function (options) {
$("#myCarousel")
.carousel(options)
.swiperight(function() {
$(this).carousel('prev');
})
.swipeleft(function() {
$(this).carousel('next');
});
};
$(function() {
yourApp.initModal({
show: function () {
yourApp.loadModalContent();
yourApp.initCarouselSwipe();
}
});
});
One to open the modal with a callback that does load your dynamic content
The content loader should retrieve the modal's selector and put the content into
Last but not least we have to init the swipe events and the carousel

bootstrap modal box open jquery location picker

I work With jquery location picker plugin for google map. now, I open map into bootstrap 3.0 modal box. This worked, But I need to: when click in save changes button show longitude and latitude in result input box.
JS:
$('#us2').locationpicker({
location: {
latitude: 46.15242437752303,
longitude: 2.7470703125
},
radius: 300,
inputBinding: {
latitudeInput: $('#us2-lat'),
longitudeInput: $('#us2-lon'),
radiusInput: $('#us2-radius'),
locationNameInput: $('#us2-address')
}
});
$(document).ready(function () {
$("#btnModal").click(function () {
//How Can I Copy myDiv here so that I can also view it in Modal
$("#myModal").modal('show');
$("#myDiv").appendTo(".modal-body");
});
$('#myModal').on('hide.bs.modal', function (e) {
$("#myDiv").prependTo("body");
})
});
HTML :
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">Location:
<input type="text" id="us2-address" style="width: 200px" />Radius:
<input type="text" id="us2-radius" />
<div id="us2" style="width: 500px; height: 400px;"></div>Lat.:
<input type="text" id="us2-lat" />Long.:
<input type="text" id="us2-lon" />
</div>
<div class="modal-footer"> Close
Save changes
</div>
</div>
</div>
</div>
result lat: <input type="text" id="lat" />
result long: <input type="text" id="lon" />
I have result long and result lat for input/join value form modal box when click in save changes button. How to create This ?
DEMO : http://jsfiddle.net/hagR2/

Give the "save changes" btn an id :
Save changes
add a click handler to the btn that transfers the values to the main page and closes the modal :
$("#save-changes").click(function() {
$("#lat").val($('#us2-lat').val());
$("#lon").val($('#us2-lon').val());
$('#myModal').modal('hide');
})
forked fiddle -> http://jsfiddle.net/Lzv7w/

Try this out:- http://jsfiddle.net/adiioo7/hagR2/2/
JS:-
$('#us2').locationpicker({
location: {
latitude: 46.15242437752303,
longitude: 2.7470703125
},
radius: 300,
inputBinding: {
latitudeInput: $('#us2-lat'),
longitudeInput: $('#us2-lon'),
radiusInput: $('#us2-radius'),
locationNameInput: $('#us2-address')
}
});
$(document).ready(function () {
$("#btnModal").click(function () {
//How Can I Copy myDiv here so that I can also view it in Modal
$("#myModal").modal('show');
$("#myDiv").appendTo(".modal-body");
});
$('#btnSave').on('click', function (e) {
$("#lat").val($("#us2-lat").val());
$("#lon").val($("#us2-lon").val());
})
});