Difference between revisions of "FancyBox"

From OpenEMR Project Wiki
(how to use fancybox.)
Line 47: Line 47:


== Users ==
== Users ==
Pages being called via fancybox need to be aware that they are in an inframe, and not in a separate popup window.

Revision as of 08:42, 21 December 2012

FancyBox In OpenEMR

Fancybox is used in OpenEMR as a replacement for pop-up windows. popups are becoming deprecated in modern browsers, and the window.close() function used to make a popup disappear is disabled in at least one browser.

Versions

Two versions of FancyBox exist in the OpenEMR codebase.

Integrating these two versions is not a big priority, see thread: http://osdir.com/ml/fancybox/2011-12/msg00192.html .

For new code, it is preferred to use the 1.3.4 version, rather than the 1.2.6 version.

Using

Initialising

Inside of the document's ready function, the following code needs to exist, to initialise each link that is supposed to open a fancybox:

$(document).ready(function(){
  // initialise fancy box
  enable_modals();

  // initialise a link
  $(".linkclass_modal").fancybox( {
    'overlayOpacity' : 0.0,
    'showCloseButton' : true,
    'frameHeight' : 400,
    'frameWidth' : 500
  });
});

Using with a link

To open a page into a fancybox, a link must either be clicked, or have its 'click' handler triggered.

This link (an 'a' entity) must have two classes associated with it: 'iframe', and the same ID supplied in the initialisation (linkclass_modal in our example).

Using inside of an onclick()

To open a page from an onclick() handler, its necessary to trigger the 'click' handle of an invisible link.

for example:

function popupfancybox() {
  $("a.findpatient_modal").trigger("click");
}

 <div style="display: none;">
   <a class="iframe findpatient_modal" href="find_patient_popup.php"></a>
 </div>

Users

Pages being called via fancybox need to be aware that they are in an inframe, and not in a separate popup window.