CodeCharge Studio
search Register Login  

Visual Web Reporting

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> Tips & Solutions

 FancyBox Modal Windows

Print topic Send  topic

Author Message
ckroon

Posts: 869
Posted: 06/03/2013, 8:21 PM

Easy peazy folks.
Once you install fancybox to your js directory and make sure all the files are on your server...

Set your link to have a class of "extLink"
HEADER:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>  
<script type="text/javascript" src="../../js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>  
<script type="text/javascript" src="../../js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>  
<link rel="stylesheet" type="text/css" href="../../js/fancybox/jquery.fancybox-1.3.4.css" media="screen">  

After the BODY tag
////////////////////////////UPDATE on CLOSE  
<script>  
  
$(document).ready(function(){  
        $(".extLink").fancybox({  
                 'width' : '60%',  
                 'height' : '80%',  
                 'autoScale' : 'false',  
                 'transitionIn' : 'fade',  
                 'transitionOut' : 'elastic',  
                 'type' : 'iframe',  
                                                                  'onClosed': function() {  
                                                                        parent.location.reload(true);   
                                                                     }  
         });  
           
                  $(".inline").fancybox({  
                 'width' : '350',  
                                 'height' : '45%',  
                 'autoScale' : false,  
                 'transitionIn' : 'none',  
                 'transitionOut' : 'none',  
                 'type' : 'inline'  
         });  
                    
                      
     });  
</script>  
OR
//////////////////////NO UPDATE on Close  
<script>  
  
$(document).ready(function(){  
        $(".extLink").fancybox({  
                 'width' : '90%',  
                 'height' : '99%',  
                 'autoScale' : 'true',  
                 'transitionIn' : 'fade',  
                 'transitionOut' : 'elastic',  
                 'type' : 'iframe'  
         });  
           
                  $(".inline").fancybox({  
                 'width' : '350',  
                                 'height' : '45%',  
                 'autoScale' : 'true',  
                 'transitionIn' : 'none',  
                 'transitionOut' : 'none',  
                 'type' : 'inline'  
         });  
                    
                      
     });  
</script>  

If you need to redirect to some close code.. create a page called _close.php and put this in the Before Initialize View event.
echo "<script language = 'javascript'>parent.location.reload(); parent.$.fancybox.close();</script>";  
  
exit;  

Then just redirect your Form or a custom CLOSE link to go to close.php


_________________
Walter Kempees...you are dearly missed.
View profile  Send private message
opw

Posts: 3
Posted: 06/04/2013, 7:04 AM

:-) Thanks a lot!

View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

Internet Database

Visually create Web enabled database applications in minutes.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright © 2003-2004 by UltraApps.com  and YesSoftware, Inc.