i am working on an mvc page that allows users to securely logon via a colorbox modal window. the modal is layed out something like this:
<html>
<body>
<div id="overlay" style="display: block;" class="overlay"> <div>
<div id="colorbox" style="display: block;">
<iframe id="logonIFRAME">
logon form is in this ssl iframe
</iframe>
</div>
<div id="restofpage"> </div>
</body>
</html>
thats the basic layout.
what happens is when the iframe form is authenticated, it calls parent.$.fn.colorbox.close() which closes the modal and reloads the parent page.
now the problem is the colorbox.close script is in the parent page (not the iframe) so it cannot be called from the iframe due to the protocols being different (https and http).
so how can i either call the script cross protocol (which i believe you cant do) or from the iframe set the colorbox div's display attribute to none and hiding the overlay. this would hide the modal just as well but can the code in the iframe talk to the parent pages html? if it could i would use something like:
$('#colorbox').attr('style', 'display: none;');
but that jquery doesnt work.
anyone got any ideas on how best to proceed?