We Keep Coding

Fancybox modal popup content not loaded properly in magento1?

Actually I got the popup modal fancy box problem where the popup is not loaded the content properly. The modal div is by default to display none. And I need to show that modal on click event.
I am using the module for AfterPAy payment method where this feature is included. When We click on the learn more button then the popup is open but not the content in that fancy box. I need to make it perfect. This my website URl https://www.tradie.com/tradie-honey-badger-sports-mid-length-trunk-1371.html
(function($) {
$(document).on('ready', function() {
$('.afterpay-what-is-modal-trigger').fancybox({
afterLoad: function() {
$('#afterpay-what-is-modal').css("display", "block");
}
afterShow: function() {
$('#afterpay-what-is-modal').find('.close-afterpay-button').on('click', function(event) {
event.preventDefault();
$.fancybox.close();
})
}
})
});
})(jQuery);
The above js code is in the file of extension modal.js. Here the aftershow function is working, but afterload is not working. Please how that modal will open properly with content.
Thanks.

As per the concern there is a div that is inline set to display none. So when you will hit the link/button then the modal will blanks due to that inline css.
Please find the html of the modal file and add an extra div at the top of that code and set display none to that div inline.
e.g.,
<div style="display:none;">
<div id="afterpay-what-is-modal">
<!--some modal code for popup-->
</div>
</div>
Add a div before the and style it to display none inline that it.
Hope this will work for you.

How to capture a click to close a modal on everything but the modal

I am using a modal similar to the modal component in the Vue docs here: https://v2.vuejs.org/v2/examples/modal.html (ok, exactly like it).
I'd like to make it so that clicking anywhere outside the modal closes it. How would I do this?

You can use the following code to make it so when anything else is clicked the message is hidden. You might need to change it to make it work with your script.
//The background of the image, the area that clicking makes it close.
var modalBackground = document.getElementsById("modal-mask")[0];
window.onclick = function(e) {
//Testing if the target is the background
if (e.target == modalBackground ) {
//Hides the message
modal.style.display = "none";
}
}

This fixed it by detecting which class was clicked on:
<div class="modal-mask" #click="closeModal($event)">
<div class="modal-wrapper">
<div class="modal-dialog" role="document">
and later in component:
methods:{
closeModal(event){
if(event.target.className == 'modal-wrapper'){
EventBus.$emit('hideModal');
}
},

Hiding bootstrap modal from jQuery doesn't work the first time

I've been having some problems with a JQuery code.
I'm trying to make a "dynamic" website, so every time you click on a link ('a' elements have a 'link' attribute), my code takes the 'link' attribute and passes it to jQuery's load() function. Thing is, I wanted to let the user know the content is loading, so I thought I could show a modal before start loading, and hiding it when finished, but it doesn't work. The first time I click on a link, modal stays there, and doesn't go away. However, from second time on, I click any link and everything works perfectly.
Why does it only fail to close the first time?
$(document).on("click", "[link]", function() {
$("#cargando").modal('show');
$('#contenido').load($(this).attr('link'), function() {
$('#cargando').modal('hide');
$('.modal-backdrop').hide();
});
});
Extra info: this code, and the modal HTML are together in a file named dyn.html, which is included at the end of the rest of the pages.
EDIT, modal code:
<div class="modal modal-static fade" id="cargando">
<div class="modal-dialog"><div class="modal-content">
<div class="modal-body"><div class="text-center">
<h4>Cargando...</h4>
</div></div></div></div></div>
EDIT, it works with:
$(document).on("click", "[link]", function() {
$('#cargando').modal('show');
$('#contenido').load($(this).attr('link'), function() {
$('#cargando').hide();
$('.modal').hide();
$('.modal-backdrop').hide();
});
});
It's messy but it's the first thing that works.

$('.modal').hide();
replace this code by applying timeout function. So it would be like.
setTimeout(function(){
$('.modal').hide();
},100);
Here 100 is the time out duration.

Well, I have been in this situation. But, here is what I found, I try to avoid using modal('show') when the modal wants to pop up, so what I prefer to do is to link the modal to an element and set the right attribute on that element and the modal will pop up.
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
so try this one and let me know the result. Don't use the
$("#cargando").modal('show');

Destory CSS Bootstrap Modal

I have a list of data in a table and a button next to each row. When I click the buton, the modal loads up a relevant remote URL into the modal.
My submit button in said modal has the following jQuery attatched:
$('#editTrackModal').modal('hide');
When the modal hides, and I load up another remote URL into the modal, the modal appears, but on slower internet connections, the original content of the modal stays there for sometimes 4-5 seconds before being replaced.
Essentially, rather than hiding, I want to 'hide and destroy' the modal, and then re-create it.
Is this possible?
Simply destroying the modal after pressing the button closes the window, but then does not allow a subsequent modal to re-open until the page has reloaded.

You could clean the content of the modal, before show, I dont know how you load the content, you could use something like this:
$("#editTrackModal .modal-body").empty();

Hi you can do like this
// the modal is distroyed on hide event..
$('#editTrackModal').on('hidden', function(){
$(this).data('modal', null); //this will destroy you data and model means it will reset.
});
and it may be duplicate of how to destroy bootstrap modal window completely?
you can refer to that link also.

A good way to ensure that the modal's content is clean after hiding/closing it is can be done like this:
$('#editTrackModal').on('hidden.bs.modal', function () {
$('#editTrackModal div').remove(); //When the hidden event is triggered, remove all the contents of the modal.
});
And when you want to show the modal again, you can do something like this:
$('#editTrackModal').append($('.modal-contents')); //create first the contents of the modal, then attach it.
$('#editTrackModal').modal('show');
Your html may look like this:
<div id="editTrackModal" class="modal fade">
<div class='modal-contents'>
......Build your modal contents here......
</div>
</div>

How to automatically close Bootstrap 3 modal after time period [duplicate]

This question already has answers here:
How to automatically close the bootstrap modal dialog after a minute
(6 answers)
Closed 8 years ago.
I'm struggling to automatically close Bootstrap modals after a set time period.
Here's the js code I'm using to close the modal in 4 seconds:
setTimeout(function() { $('#myModal').modal('hide'); }, 4000);
Two basic problems:
(A) When the html page (that contains the modals) loads, the modal Timeout seems to run before the modal is even displayed. The modal is set to display after clicking on a link in the page. If the link is not clicked immediately when the page loads, the modal will only appear briefly and then close immediately because essentially the Timeout period started when the html page loaded, not when the modal was displayed.
(B) If the user clicks on the link to launch the modal a second time (or 3rd time, 4th time, etc.), the modal displays properly but does NOT close after the time period. It just stays open until the user manually closes it.
So...the two questions are:
(1) How do I get the modal Timeout period to wait until the modal is displayed before running the clock.
(2) How do I get the modal to display a second and third time with the proper Timeout function still working?
(The answer(s) proposed at this link below looked promising, but aren't working for me. Maybe they don't work on Bootstrap 3? How to automatically close the bootstrap modal dialog after a minute )
This code below looked very promising, but didn't work even after changing 'shown' to 'shown.bs.modal'. Or maybe I'm placing this code in the wrong place?
var myModal = $('#myModal').on('shown', function () {
clearTimeout(myModal.data('hideInteval'))
var id = setTimeout(function(){
myModal.modal('hide');
});
myModal.data('hideInteval', id);
})
Many thanks for any suggestions!

I'm not pretty sure about your html so I did a complete example:
html:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Open Modal</a>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4>Header</h4>
</div>
<div class="modal-body">
Modal Content
</div>
</div>
</div>
</div>
js:
$(function(){
$('#myModal').on('show.bs.modal', function(){
var myModal = $(this);
clearTimeout(myModal.data('hideInterval'));
myModal.data('hideInterval', setTimeout(function(){
myModal.modal('hide');
}, 3000));
});
});
The main difference with your code:
I set a time for timeout (3000)
I set myModal variable inside
callback

I guess it depends on how you display your modal. But you could set the timeout in the event listener?
Here is a JSFiddle to demonstrate how you can achieve it. Basically you add the timeout in the function that will be executed when the event happens.
// Select the element you want to click and add a click event
$("#your-link").click(function(){
// This function will be executed when you click the element
// show the element you want to show
$("#the-modal").show();
// Set a timeout to hide the element again
setTimeout(function(){
$("#the-modal").hide();
}, 3000);
});
If the event you listen for is a click on a link you could have to prevent the default action too by using event.preventDefault(). You can find more info on that here
I hope this helps.