javascript - Changing the direction of colorbox(lightbox) -

When I click a link, I use a JavaScript code to create a lightbox (color box) effect. Live example

The box starts to fly from the top right and closes in the middle of the page. However, I need this to start flying from the center of the window at the top right and then close in the center of the page.

Can you help me with this?

The HTML is such:

  & lt; Div class = "column" & gt; & Lt; A class = 'iframe' href = "http://www.wikipedia.org/" & gt; Click here & lt; / A & gt; & Lt; / Div & gt; & Lt ;! - End of column square - & gt;  

and JS:

  & lt; Script & gt; How to assign colorboxes to $ (documents) .ready (function () {// instances $ $ elements (".iframe") Colorbox ({iframe: true, width: "1030px", height: "550px"} ); // Example of conservation of JavaScript events for inline calls. $ ("#click"). Click (function () {$ ('# click'). Css ({"background-color": "# f00 "," Color ":" #fff "," cursor ":" inheritance "}). Text (" Reopen this window and this message will still be. "); Return returned;});}); & Lt; / Script & gt;