Bootstrap Component
  • Home
  • Darklight
  • Datepicker
  • Dialog
  • Dropdown
  • Fileuploader
  • Floater
  • Slider
  • Switch
  • Notify
  • Others

Darklight

An component for user guide.

  • Example
  • Usage
  • - Options
  • - Events

Darklight bootstrap-darklight.js

Examples

When start darklight, window will turn into dark and target element will be highlight. After user interactive with target element, darklight will disappear. You can defind muti-darklight in queue.

Usage

Enable darklight via JavaScript:

$("#element").darklight(option, checkFunction);

You can also enable darklight in queue via JavaScript:

$("#element1").darklight(options, checkFunction).nextDarklight("#element2", options, checkFunction);
Tips! Darklight will not work if its parent element has been setted css style of z-index.

Options

Options should be passed via JavaScript.

Name type default description
backdrop string static Includes a darklight-backdrop element. Alternatively, specify true for a backdrop which close the modal on click.
focus boolean true When set target as darklight, target element will be focused.
event string click It will bind event for target element to check whether the darklight could be closed.
init function '' It will call when element start darklight.
finish function '' It will call after element end darklight.

Events

Event Description
callback It will trigger by options 'event'. If callback return true, it will close darklight. Default is always return true.
$("#element").darklight({event: "keyup"}, function(event){
	if(event.keyCode == 13)
		return true;
	return false;
});

Build By zombieJ.