How to use

LightFace instances can be created at any time. There are no arguments other than the instance options.

/* create LightFace instance */
var modal = new LightFace({
    width: "auto",
    height: 400,
    draggable: true,
    title: "Hello from LightFace!",
    content: "<p>This is the LightFace content!</p>",
    buttons: [
        { title: "Close", event: function() { this.close(); }, color: "blue" }
    ],
    resetOnScroll: true
});

/* open when link is clicked */
document.id("launchModal").addEvent("click", function(e){
    e.stop();
    modal.open();
});

1. /* create LightFace instance */
2. var modal = new LightFace({
3. width: "auto",
4. height: 400,
5. draggable: true,
6. title: "Hello from LightFace!",
7. content: "<p>This is the LightFace content!</p>",
8. buttons: [
9. { title: "Close", event: function() { this.close(); }, color: "blue" }
10. ],
11. resetOnScroll: true
12. });
14. /* open when link is clicked */
15. document.id("launchModal").addEvent("click", function(e){
16. e.stop();
17. modal.open();
18. });

LightFace works great with static content, IFrames, AJAX Requests, tooltips, and images. LightFace also resizes and repositions when the window is resized or scrolled. Tested in IE7+, FF, Safari, Opera, Chrome, and iPad.

For specific usage and options, please read the documentation or visit http://davidwalsh.name/js/lightface

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.