Turn modal in page when in iframe (was Modal & iframe) WordPress
- SOLVED
Ok, I figured out a solution.
Only I'm not able to realize it :)
The solution is:
When site is embedded in an iframe, I need to change this:
button opens modal -> button opens another page with the same modal content
So I'll have no modals in iframe and everything will work fine!
Here is modal content:
global $post;
wp_reset_query();
$campaign = atcf_get_campaign( $post );
?>
<div id="contribute-modal-wrap" class="fundify-modal">
<?php
do_action( 'fundify_contribute_modal_top', $campaign );
if ( $campaign->is_active() ) :
echo edd_get_purchase_link( array(
'download_id' => $campaign->ID,
'class' => '',
'price' => false
) );
else : // Inactive, just show options with no button
atcf_campaign_contribute_options( edd_get_variable_prices( $campaign->ID ), 'checkbox', $campaign->ID );
endif;
do_action( 'fundify_contribute_modal_bottom', $campaign );
?>
</div>
Answers (4)
Sébastien | French WordpressDesigner answers:
I do the job
tomaso1980 comments:
great! waiting for it
Sébastien | French WordpressDesigner comments:
job done !
as you can see, for resolution lower than 768px there is no modal and the content of the modal is below the button, as you ask me by mail.
Good night :-)
Francisco Javier Carazo Gil answers:
Maybe you can change the position of the modal after opening it using .position() or .offset() of jQuery.
tomaso1980 comments:
consider I'm not so skilled :)
Please tell me what I need to write and where
Francisco Javier Carazo Gil comments:
Tell me the id of your modal.
tomaso1980 comments:
contribute-modal-wrap
Francisco Javier Carazo Gil comments:
Try to use this script:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
jQuery("#contribute-modal-wrap").center();
tomaso1980 comments:
Where I should insert this script?
Francisco Javier Carazo Gil comments:
You should insert this script in some part of your iframe, after modal is showed.
tomaso1980 comments:
I can't edit iframe. I can edit only my website and iframe is external
Francisco Javier Carazo Gil comments:
Ok, you can access elements in iframe from your site with this (using the center function we have previously declared):
$('#your_iframe_id').load(function(){
$('#iframe1').contents().find("#modal_id").center());
});
The problem is with certain configuration of security, you can have a permission denied type or something like this (think about what you can do using JavaScript to modify iframes with bad intentions).
tomaso1980 comments:
I don't the frame id... I need something like "if is in an iframe, do this.."
Francisco Javier Carazo Gil comments:
Ok so try it:
$('iframe').load(function(){
$(this).contents().find("#modal_id").center());
});
tomaso1980 comments:
Ok, I try. But please tell me where I have to put it and the exact syntax.
Francisco Javier Carazo Gil comments:
Where do you load your iframe? You can add it in your footer.php for example to test it and later we can do something like:
<?php if(is_page("page_who_loads_iframe")): ?>
...
<?php endif; ?>
tomaso1980 comments:
So I need just copy&paste $('iframe').load(function(){
$(this).contents().find("#modal_id").center());
});
in footer?
Francisco Javier Carazo Gil comments:
You have to copy also the center() function I have written before and yes in an HTML part of footer.php would be ok.
Remember to set it between <script> tags.
tomaso1980 comments:
So, tell me if I'm doing wrong
<script>
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
jQuery("#contribute-modal-wrap").center();
$('iframe').load(function(){
$(this).contents().find("#contribute-modal-wrap").center());
});
</script>
Francisco Javier Carazo Gil comments:
This should be ok. Remember to reload (force reload with Shift + F5 to reload JS).
tomaso1980 comments:
Doesn't work...
Francisco Javier Carazo Gil comments:
Any error in console? Probably there is a security error, you can change things inside iframe sometimes, but maybe you can do the iframe bigger and prevent the scroll.
tomaso1980 comments:
I can't change iframe. Sorry.
Francisco Javier Carazo Gil comments:
Sorry :(
If iframe is HTTPS and your site is HTTP (or anyway), this is more problematic, yet.
tomaso1980 comments:
It's simply external
