Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2014-02-12

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 :-)

2014-02-11

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

2014-02-11

Hariprasad Vijayan answers:

Hello,

Can you provide the url to check?

2014-02-11

Bob answers:

can you please give us url where you are working.