Bootstrap Modal keyboard & backdrop property issue for multiple modals - javascript

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});

Related

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();
},

My CSS gone after printing my modal using prinThis.js

I am using Modal and i Want to print it, but when i am trying to print it using printThis.js its Style/Css remove.
How to fix this.
The code and the example output is below:
<script>
function PDFPrint() {
$("#printthispdf").printThis({
importCSS: true,
importStyle: true,
loadCSS: "/Content/SnapCSS/printpdf.css",
printContainer: true,
pageTitle: "PDF Export",
removeInline: false,
printDelay: 0,
header: null,
formValues: true,
copyTagClasses: true,
});
}
</script>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-body" id="printthispdf">
//code here
</div>
</div>

Bootstrap, how to prevent from closing a dropdown-menu when modal popup displayed

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 ;
});

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 3 - modal - load from multiple remote sources

Been sweating for days..
I'm running bootstrap 3.1 and want to load different remote pages into my modal depending on what button is clicked.
This works the first time I click the button, but then when I try to load the second page, it throws me an undefined error. Please please help - surely this is a common operation and something I wouldn't think would be that difficult.
<script type="text/javascript">
function modalLoad(remotePage){
$('#myModal').modal({
show: false,
backdrop: true,
keyboard: false,
remote: remotePage
})
$('#myModal').on('show.bs.modal', function (e) {
alert('showing');
});
$('#myModal').on('shown.bs.modal', function (e) {
alert('modal opened');
});
$('#myModal').on('hidden.bs.modal', function (e) {
// tried all of the variations below
$(e.target).removeData("bs.modal").find(".modal-content").empty();
// $(e.target).remove();
// $(this).removeData('bs.modal');
//$("#myModal").remove();
// $(this).data('bs.modal', null);
alert('removed');
});
$('#myModal').modal('show');
};
</script>
<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">Update here</div>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<button style="primary" onclick="js:modalLoad('remotePage1.html');" class="btn btn-default" name="yt0" type="button">Open Modal</button>
<button style="primary" onclick="js:modalLoad('remotePage2.html');" class="btn btn-default" name="yt0" type="button">Open Modal</button>
Any help would be so so appreciated.. :S

Categories