FancyBox Simple Introduction

1. Download FancyBox, unzip the file as needed to copy the files to the Web page folder (it is recommended not to change the directory structure), and in the Web source code to introduce the corresponding CSS style and JS file (if you change the directory structure, when introduced, adjust the corresponding code, corresponding to their path).
Note: Don't forget to load the JQuery library first!

<!--load JQuery Library (required)--<script Type="Text/javascript" Src="Http://code.jquery.com/jquery-latest.min.js"></script><!--Introducing FancyBox core file (required)--<link rel= " Stylesheet " href="/fancybox/source/ jquery.fancybox.css?v=2.1.5 " type=" text /css " media=" screen " span class= "tag" >/><script type< Span class= "pun" >= "text/javascript"  src=  "/fancybox/source/jquery.fancybox.pack.js?v=2.1.5" ></SCRIPT> 
 
                 /span>             

2. Add a link to the element that triggers the FancyBox effect (such as a thumbnail or "Click me" three words) and set its HREF attribute value to a link to the file that needs to be shown in the matte layer (such as the URL of the original thumbnail image). Example code:

<a Class="FancyBox" Rel="Group" Href="Original _1.jpg"> src= "thumbnail _1.jpg"  alt< Span class= "pun" >= /></a>< span class= "tag" ><a class= "FancyBox" Span class= "PLN" > rel= "group" href= "original _2.jpg" > src= "thumbnail _2.jpg"  alt= /></a>   

3. Initialize the FancyBox () function when the page is finished loading. Example code:

<scriptType="Text/javascript">$(document).  Ready(function(){$(". FancyBox").  FancyBox();}); </script>                 

Case
For example, we do a click on the image to pop up a form form, first let a label wrap this image
<a class= "FancyBox" rel= "group" href= "#yuyueform" ></a >

The href is the id attribute of the form.
<form style= "Display:none" id= "Yuyueform" action= "/yuyue/new.action" method= "POST" >
<LEGEND><H3>XX Hospital Consultation appointment information Check 
<input type= "hidden" name= "yuyue.patient.id" value= "${sessionscope.patient.id}" >
<input type= "hidden" name= "yuyue.doctor.id" value= "${doctor.id}" >
<input type= "hidden" name= "Yuyue.money" value= "${doctor.role = = ' General Practitioner '?" 2 ': ' 3 '} ">
<label> Reservation Person: ${sessionscope.patient.patientname}</label>
<label> Diagnostics Doctor: ${doctor.docname}</label>
<label> Registered Amount: ${doctor.role = = ' General Practitioner '? ' 2 USD ': ' $3 '}</label>
<label> Time:</label>
<input type= "text" id= "Yuyuetime" name= "Yuyue.yuyuetime" >
<div class= "Form-actions" >
<button class= "btn btn-success" onclick= "btnsubmit ()" > Confirmation </button>
</div>
        
</form>

FancyBox Simple Introduction