i would like to have different function when my fancy box is closed using the close button and when my fancy is closed when the transaction is successful.
i used parent.$.fancybox.close();
to close the fancy box when the transaction is successful and i want it to display an alert message. while when the fancy is closed using the closed button i don't want the alert message to prompt. is there a way this could happen?
this is my code for the parent screen:
$(document).ready(function() {
$(".popup").fancybox({
'scrolling' : 'no',
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'closeClick' : false,
'autoDimensions' : true,
'width' : 1000,
'centerOnScroll' : true,
'onComplete' : function() {
$('#fancybox-frame').load(function() {
$('#fancybox-content').height($(this).contents().find('body').height());
});
},
'onClosed' : function() {alert("Successful!"); }
});
});
but it still shows the alert message whether it is closed using the close button or successful transaction.
Remove this line from your code.
'onClosed' : function() {alert("Successful!"); }
and show alert when you call close function explicitly. May be you can create a function like this and call parent.CloseFancyBox() instead of calling parent.$.fancybox.close()
function CloseFancyBox()
{
$.fancybox.close();
alert("Successful");
}
Related
We're using fancybox 2 to launch a donation process in our app. Upon completion, the modal closes and opens up another "thank you" modal. We're seeing some odd behavior if you close that "thank you" modal and click on the "Donate" button again. The modal background overlay briefly appears and then disappears, and the modal doesn't show up. But, if you click it again, it works just fine.
I haven't been able to find any references to this happening to anyone else. We have a live demo where you can see the behavior here: https://demo.donordrive.com/index.cfm?fuseaction=donorDrive.participant&participantID=8558#donate
(The donation modal should open automatically, but if not, click "Support Me") Make a donation using a test credit card number (e.g., 4111111111111111) -- obviously, this won't actually charge you anything.
The relevant javascript code starts at line 162 if you view source. (I'll also include it at the end of this post).
I thought maybe it was because I wasn't explicitly closing any fancybox modals prior to opening the new ones, but that didn't change anything. So, I'm open to suggestions on what may be causing this. It's very weird.
Thanks!
Relevant JS:
<script type="text/javascript">
jQuery(function($) {
openExpressDonate = function() {
$.fancybox({
closeBtn: false,
closeEffect: 'none',
helpers : {
overlay : {
closeClick: false,
css: {'background-color': 'rgba(0, 0, 0, 0.60'},
locked: true
}
},
href: 'https://demo.donordrive.com/index.cfm?fuseaction=expressDonate.modalparticipant&ParticipantID=8558',
margin: 0,
maxWidth: 400,
height: 'auto',
openEffect: 'none',
padding: 1,
scrolling: 'no',
type: 'iframe'
});
}
$('.js-express-donate').on('click', function(e) {
e.preventDefault();
if (window.ga) {
ga('send', {
hitType: 'event',
eventCategory: 'Express Donate - Participant',
eventAction: 'Donation Started',
eventLabel: 'Event 1183'
});
}
openExpressDonate();
});
if (location.hash && location.hash == '#donate') {
$('.js-express-donate').click();
}
resizeExpressDonateModal = function() {
$.fancybox.update();
}
showExpressDonateThankYou = function(target, data) {
$.fancybox({
afterShow: function () {
fancyParent = $('.fancybox-wrap').parents(); // normally html and body
fancyParent.on('click.modalThanks', function () {
$.fancybox.close();
fancyParent.off('click.modalThanks');
});
$('.fancybox-wrap').on('click', function (event) {
// prevents closing when clicking inside the fancybox wrap
event.stopPropagation();
});
},
helpers : {
overlay : {
closeClick: false,
css: {'background-color': 'rgba(0, 0, 0, 0.60'},
locked: true
}
},
href: 'https://demo.donordrive.com/index.cfm?fuseaction=donorDrive.modal' + target + 'ExpressDonateThanks&donorID=' + data.values.donorID + '&CSRFToken=' + data.values.CSRFToken + '&n=' + data.values.isNewConstituent,
margin: 0,
maxWidth: 400,
minHeight: 300,
modal: 1,
openEffect: 'none',
padding: 1,
scrolling: 'no',
type: 'iframe'
});
}
});
</script>
We've solved this. A fresh set of eyes found that we had an explicit fancybox.close() call that was firing when clicking on the "thank you" modal's parent (a holdover from another feature where we have such a modal, but the user can't re-open it from that same page). We removed that and it appears to be fixed.
I am dynamically appending a <div> to the body of my webpage. This <div> does not exist on my .html page.
Within this <div> I am creating a Jquery UI YES NO box. Quite simply, it will 'do something' and close the box when YES, and just close the box when NO.
I have a working piece of code to create this box. However, frequently it takes two clicks of the YES button to work, which is very confusing. You'll see I have used a variety of methods to close the box.
$(function () {
$('body').append('<div id="dialog-confirm"></div>').click(function (e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
$("#dialog-confirm").dialog({
autoOpen: true,
height: 200,
width: 200,
modal: true,
title: 'Choose item?',
buttons:
{
'YES': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
});
The problem is that there is a race condition between your adding the div and attaching the click handler. Sometimes it happens before, sometimes after. That's why you get inconsistent click behavior. Try the following:
$(function() {
$('body').append('<div id="dialog-confirm"></div>');
$("#dialog-confirm").dialog({
autoOpen : true,
height : 200,
width : 200,
modal : true,
title : 'Choose item?',
buttons : {
'YES' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
$('#dialog-confirm').click(function(e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
});
I am building an angularJS webapp and I want to open a youtube video by calling a method of my constructor. To achieve that; I want to reproduce the same behavior as
$(document).ready(function() {
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'fade',
closeEffect : 'fade',
padding: 0,
helpers : {
media : {},
buttons : {}
}
});
});
But using the manual way, $.fancybox.open([ ... ]). Can someone guide me on how to do it?
$.fancybox.open({
content: '<iframe width="xxx" height="xxx" src="//www.youtube.com/embed/xxxxxxxx" frameborder="0" allowfullscreen></iframe>'
});
You don't need to set the full iframe HTML tag as content in the fancybox API options but passing the video's URL and set the type to iframe. You could simply do :
jQuery(document).ready(function ($) {
$.fancybox.open({
href: "https://www.youtube.com/embed/jid2A7ldc_8",
type: "iframe",
// other API options
openEffect: 'fade',
closeEffect: 'fade',
padding: 0,
helpers: {
buttons: {}
}
});
}); // ready
See JSFIDDLE
I have a simpledialog2 box, its fully functional but im trying to work out a way to call a function when its been loaded.
For example i have
$('<div>').simpledialog2({
mode : 'blank',
animate : false,
transition : 'none',
// dialogAllow : true,
// dialogForce : true,
headerText : 'Statement Metadata',
blankContent : "HTML HERE"
});
After HTML HERE has been loaded what event is fired? Or how can i call javascript once the simpledialog2 is fuly ready?
Similar to pageshow event handler...
Try the following:
$('<div>').simpledialog2({
mode : 'blank',
animate : false,
transition : 'none',
// dialogAllow : true,
// dialogForce : true,
headerText : 'Statement Metadata',
blankContent : "HTML HERE",
callbackOpen: function() {
var me = this;
alert('opened');
setTimeout(function() {me.close();},2000);
}
});
Fiddle:
http://jsfiddle.net/ykHTa/62/
basically I am trying to launch a fancybox window when a specific button is clicked, and then I want to pass fancybox content to display, now my understanding is that if I do something like this it should open a fancybox window with the content I pass it,
Javascript/jQuery:
$('#test').live('click', function(){
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
'type' : 'inline',
'content' : '<div>Test</div>',
'autoDimensions' : false,
'width' : 400,
'height' : 400
});
})
HTML:
<div id="test"></div>
CSS:
#test {
background: #000;
width: 250px;
height: 25px;
}
But when I launch that it gives me undefined, at first I thought it was referencing the wrong ID, but the HTML is sound.
I am guessing that it's probably something very simple that I am missing...
Thanx in advance!
You are missing the ,
Remove the line 'type' : 'inline',
You can take a look here http://jsfiddle.net/ynhat/zkYTZ/
I am not sure why the 'type' : 'inline', causes problem. Maybe it is a bug or Forces content don't need the type option.
Your missing a ","
$('#test').live('click', function(){
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic' , <---------
'type' : 'inline',
'content' : '<div>Test</div>',
'autoDimensions' : false,
'width' : 400,
'height' : 400
});
})