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.
Related
Actually i want to do open color box without popup and it need to be only show hide inside a div. can we target a div to open colorbox content.
<a href='#myGallery' class='group'>click here</a>
<div class=''><!--this must be container of colorbox, and disable popup-->
<div id="myGallery"><--some content with photo--></div>
</div>
function _teamPopup(){
$(".group").colorbox({
inline:true,
rel:'group',
href:$(this).attr('href'),
scrolling: false,
opacity:1,
width:100+"%",
});
}
on my web page , there is lot of thumbnails, when i click on it content must display without popup.and it can be next ,prev , close like colorbox group function.
please check below image and you can get some idea.
Use toggle function of jQuery to hide and show content inside an element
Why you want to change colorbox if its purpose is exactly to have a gallery popping up?
If you look around there are widgets more specific for the kind of problem you're having.
Check http://galleria.io/themes/classic/.
If you still don't like what you can find around why don't you just code the big div to change its image when clicking on a thumbnail?
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>
I've been searching SO and the Web for an answer on my issue, but couldn't find anything.
I have appended a reveal modal to the BODY with jQuery. Now when I click on the button which opens the modal, only the overlay is shown. I just can't figure out what is causing the problem.
I have created an example on codepen. http://www.codepen.io/anon/pen/KhsGH
"Open Modal 1" should open the programmatically appended modal.
"Open Modal 2" opens the modal, that is placed directly in the BODY. (This one is just to show that it usually works)
Maybe one of you guys can help me with this.
Thank you very much.
EDIT:
This error is displayed in Firebug:
TypeError: settings is undefined
this.show(modal, settings.css.open);
You have to call foundation after you have appended the modal content div
$(document).ready(function(){
$("body").append('<div class="reveal-modal small foo1" data-reveal><p>Test Reveal</p></div>');
$(document).foundation();
$(document).on('click', '.trigger_foo1',function(e){
e.preventDefault();
$(".foo1").foundation('reveal', 'open');
});
$(document).on('click', '.trigger_foo2',function(e){
e.preventDefault();
$(".foo2").foundation('reveal', 'open');
});
});
I have used cluetip taken from this location http://plugins.learningjquery.com/cluetip/. I need to open the clue tip when page loads and close the cluetip on clicking the close button.
The html code:
load
<div id="loadme">test content
close
</div>
Now the clue tip opens only on mouse over. I need to open the clue tip when page loads and close the cluetip on clicking the close button.
Yes, your cluetips opens only mouse over, lets call this event!
$(document).ready(function() {
$('.load-local').trigger('mouseover');
});
You can use this following html and jquery
<div class="open">
<p>This the content show on after the page loaded.</p>
<button>close</button>
</div>
$(document).ready(function() {
$("button").click(function () {
$(".open").css("display", "none");
});
});
Here the Demo
Hi hope some one can help. Have been trying to display some hidden inline content in a colorbox. Everything works great in firefox but in IE8 it works the first time then fails the second. When using alert(id) the id var is coming up as undefined the second time in IE.
Have tried a click handler to set the id and I get the same result. Here's some sample html (simplified for clarity). This is generated by Drupal CMS
<div class="my-div">
<a class="pop-extra nid-628 cboxElement" href="/alex-f">the link triggering colorbox</a>
<div id="628" class="inline-content" style="display: none;">
The hidden content to display
</div>
</div>
Here's my jquery
$(document).ready(function() {
// Hide inline content
$('.inline-content').hide();
//Fire colorbox
$('a.pop-extra').colorbox(
{
height:700,
width:420,
inline:true,
//Set the inline content to display dynamicaly by grabing the next div id
href:
function(){
id = $(this).next().attr("id");
return '#'+id;
},
onOpen:function(){
//Show the content so colorbox has something to display
$('#'+id).show();
},
});
$(document).bind('cbox_closed', function(){
//Hide content again when colorbox closes
$('#'+id).hide();
});
});
To see a demo please have a look at this url:
http://eyestoneartists-com-au.kept.com.au/browse-extras/male/all
To reproduce in IE8 click one of the images, then close the image then click it again.
put the content in another div and then display:none in a div before it.