If an element could not be detected as any other type, it will be treated as inline HTML. Inline HTML means that the content that the lightbox will show is already available in the page.

There are 3 different methods to select the content.

Select the content with an anchor:

<a href="#anchor" class="bblb">HTML</a>

Select the content with any valid jQuery-selector:

<button type="button" class="bblb" data-bblb-content="selector">HTML</button>

Select the content that is hidden inside the element:

<div class="bblb">
  <button type="button">HTML</button>
  <div class="bb-lightbox-htmlcontent">hidden HTML, only visible in lightbox</div>

The content-element that is selected will not be added to the lightbox-content, only its content. The reasons for this decision are that if the selected content-element has an id, we will not duplicate this id. Additionally the content-element can be hidden with any CSS without being forced to override the styles inside the lightbox.

By default all styles and scripts will be removed, but any data and event-handlers that are bound to the elements will be [copied](http://api.jquery.com/clone/#clone-withDataAndEvents). If the data and events should not be copied, the `data-bblb-copyevents`-attribute can be set to false.

<a href="#anchor" class="bblb" data-bblb-copyevents="false">HTML</a>

It is possible to define a selector with the data-bblb-selector-attribute to show only a part of the selected content. The selector can be any string, that is a valid jQuery selector.

<a href="#anchor" class="bblb" data-bblb-selector="selector">HTML</a>

It is also possible to append scripts from the content-element again to the document. This option should be used really carefully, as this can lead to errors that are really hard to find. To load scripts (inline and external) we set the data-bblb-loadjs-attribute to true.

<a href="#anchor" class="bblb" data-bblb-loadjs="true">HTML</a>