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();
},
Related
I am trying to use Vue3 (Vite) and Bootstrap 5 to create a modal that is called by code. However, when opening the modal from its parent, an error is thrown.
I have bootstrap installed and included:
import bootstrap (main.js)
import bootstrap/dist/js/bootstrap does not change anything.
I have created a simple modal that listens for a prop and then opens the modal.
When I open it, the error appears:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'backdrop')
<template>
<div class="modal" tabindex="-1" id="errModal" aria-labelledby="ErrorModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Error {{ this.occurred }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="ErrorModalLabel"></button>
</div>
<div class="modal-body">
<p>{{ this.error_message }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { Modal } from "bootstrap"
export default {
props: {
occurred: String,
error_message: String,
show: Boolean,
},
components: {
myModal: null
},
data() {
return {
}
},
methods: {
},
mounted() {
this.myModal = new Modal(document.getElementById('errModal'))
},
watch: {
show: function (newVal, oldVal) { // watch it
this.cam_prop = newVal.properties
},
}
};
</script>
Calling from Parent:
<RegIdentErrorModalVue id="#ErrModal" :show="this.error" :occurred="'Identification'" :error_message="this.error_text">
</RegIdentErrorModalVue>
Creating the Modal with new bootstrap.Modal does not work (bootstrap not defined)
I think the error is importing, but the styling works, could it be Vite?
I've multiple modals but keyboard: false property not working in some cases:
First event open Types model:
$('.charts').click(function () {
$('#ModalVTypes').modal({ backdrop: 'static', keyboard: false, show: true });
});
Second event open Matrics or Chart modal and hide Types model:
$('.glist a').click(function () {
$('.modal').modal('hide');
if (Type == 1) {
$('#ModalMatrics').modal({ backdrop: 'static', keyboard: false, show: true });
} else {
$('#ModalChart').modal({ backdrop: 'static', keyboard: false, show: true });
}
});
If i've use single modal its working fine.
Thanks
Try to give in HTML div modal element like below
<div class="modal-open">
<div class="modal fade" id="ModalVTypes" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Test modal</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Solution has been fond:
The issue with modal hide functionality.
$('.modal').modal('hide'); //Create issue because it'll reset all properties
Replaced this with following:
$('Model_ID').modal({ backdrop: 'static', keyboard: false, show: false});
I am using jquery location picker inside a bootstrap modal. It opens the map but the autocomplete suggestions are not visible.
The html and the javascript code are given below.
$timeout(function() {
$('#onboardingModal').on('shown.bs.modal', function() {
$('#mappicker').locationpicker({
location: {
latitude: 12.9715987,
longitude: 77.59456269999998
},
radius: 200,
inputBinding: {
locationNameInput: $('#locationInput')
},
enableAutocomplete: true,
autocompleteOptions: {
componentRestrictions: {country: 'in'}
},
onchanged: function (currentLocation, radius, isMarkerDropped) {
var addressComponents = $(this).locationpicker('map').location.addressComponents;
$scope.lat = $(this).locationpicker('map').location.latitude
$scope.lng = $(this).locationpicker('map').location.longitude
// updateControls(addressComponents);
},
});
});
});
<div class="modal fade" id="onboardingModal" tabindex="-1" role="dialog" aria-labelledby="onboardingModalLabel" style="overflow:hidden" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="form-group">
<label for="locationInput">LOCATION</label>
<input type="text" class="form-control" id="locationInput" placeholder="Search"/>
<div align="center" class="map" id="mappicker" style="width: 500px !important; height: 300px"></div>
</div>
</div>
</div>
</div>
Tried changing the z-index also added ui-front class of jquery, didn't work on either case.
What am I doing wrong in this?
I got the answer in one of the issues in github. Needed to add z-index to pac-container.
.pac-container{z-index:2000 !important;}
Reference: Github issue
Inside a dropdown-menu I have a button to open a modal popup. If you display the modal popup when you close it, it will also close the dropdown-menu.
How to prevent from closing a dropdown-menu when a modal popup is displayed ?
This is the code :
<div class="dropdown-menu" style="width:240px;">
<div class="row">
<div class="col-xs-6">Log in</div>
<div class="col-xs-6"><img data-toggle="modal" data-target="#myModal" width="20px" src="images/help-question.png"></div>
</div>
...
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
etc...
</div>
ok, I have found a solution :)
var hideLogin = true ;
$('#ModalHelpLogin').on('shown.bs.modal', function (e) {
hideLogin = false ;
})
$('#ModalHelpLogin').on('hidden.bs.modal', function (e) {
hideLogin = true ;
})
$('#DropLogin').on('hide.bs.dropdown', function () {
return hideLogin ;
});
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