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
Related
When I click on the modal, I have an input field displayed and autocompletion witith ajax to find a product for example.
My apporach does nt work.It open my page SelectPopUpProducts (select_popup_products.php), the autocompletion works fine.
How to open a pop up without to trigger an ajax action $_GET inside the js.
note : bootstrap 5
<div class="col-md-5">
<a
href="<?php echo $this->Orders->link('SelectPopUpProducts'); ?>"
data-bs-toggle="modal" data-refresh="true"
data-bs-target="#myModal4"><?php echo '<h4><i class="bi bi-plus-circle" title="' . $this->Orders->getDef('icon_edit') . '"></i></h4>'; ?></a>
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="te"></div>
</div>
</div> <!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
I tried this but does not work.
My normal js (work):
$( document ).ready(function() {
$("#myModal4").on("show.bs.modal", function(e) {
const link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
})
Try to change by this (not work) :
$(document).ready(function() {
$('[data-bs-toggle="modal"]').click(function(e) {
e.preventDefault();
var data_target=$(this).attr('data-bs-target');
if (data_target=="#") {
data_target="#modal4"+parseInt(Math.random()*1000);
}
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$('<div class="modal hide fade" id="'+data_target.replace("#","")+'">' + data + '</div>')
.modal()
.on('hidden', function(){
$(data_target).remove();
});
}).success(function() {
$('input:text:visible:first').focus();
});
}
});
return false;
});
I have a modal caller link and a modal as below :
<!-- modal caller -->
CALL MODAL
<!-- modal -->
<div id="modal" class="modal auto-hide-modal" data-time="3000" data-backdrop="static" data-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">MY TITLE</h5>
</div>
<div class="modal-body">MY TEXT</div>
<div class="modal-footer">
<div class="progress" style="height: .25rem;">
<div id="time_indicator" class="progress-bar" role="progressbar"></div>
</div>
</div>
</div>
</div>
</div>
And I have these scripts :
$(document).on('shown.bs.modal', '.auto-hide-modal', function () {
var time = $(this).data('time');
$(this).delay(time).fadeOut(300, function () {
$(this).modal('hide');
});
});
So far, so good.
I want progress bar (time_indicator) shows remaining time for the modal to close.
You have to use jQuery animate functoin and set the speed of animation to time. and then reset the width back to 0; so the next time you open the modal the animation performs again.
CSS:
#time_indicator {
width: 0;
}
JavaScript:
$(document).on('shown.bs.modal', '.auto-hide-modal', function () {
var time = $(this).data('time');
$("#time_indicator").animate({width: "100%"}, time);
$(this).delay(time).fadeOut(300, function () {
$(this).modal('hide');
$("#time_indicator").css("width", 0);
});
});
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.
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 ;
});
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