It's possible to show HTML snippets in the lightbox as long as they are on the same domain. In this case the rel attribute should be set to lightmodal. Again it's possible to group the content, (e.g. lightmodal[search]) but in addition to that, it's possible to control some of the inline / modal properties. It's possible to set the 'width', 'height' and 'scrolling' properties of the inline content. The properties are separated from the group name by a |, for example lightmodal[search|width:100px;] and lightmodal[search|width:100px;][my caption]. If no grouping is being used, then the | is still used and the format would be lightmodal[|width:100px;]. The properties should all be of the format "property: value;" - note the closing semi-colon. If no properties are set, then the default width and height of 400px will be used. See below for more detailed examples.

Basic example:

<a href="search.php" rel="lightmodal">Search</a>

Basic example with caption:

<a href="search.php" rel="lightmodal[][my caption]">Search</a>

Grouped example:

<a href="search.php" rel="lightmodal[search]">Search</a>
<a href="search.php?status=1" rel="lightmodal[search][published]">Search published content</a>

Controlling modal property example:

<a href="search.php" rel="lightmodal[|width:400px; height:300px; scrolling: auto;]">Search</a>

Controlling modal property when grouped example:

<a href="search.php" rel="lightmodal[search|width:400px; height:300px; scrolling: auto;]">Search</a>
<a href="search.php?status=1" rel="lightmodal[search|width:400px; height:300px;][Search published]">Search published content</a>
<a href="search.php?status=0" rel="lightmodal[search|width:400px; height:300px;][Search Unpublished]">Search unpublished content</a>

Comments

faridjame’s picture

faridjame commented

How can I make the lightbox modal window to display some content inside the page...
something like this:

<a href="" rel="lightmodal">click to view some content</a>

<div rel="lightmodal" style="display:none;">this is the content I'd like to display when the link is clicked</div>

Is this possible?

odedbobi’s picture

odedbobi commented

i had the same problem, but decided to not fight the lightbox module but use a different one.
i have went to colorbox, which has this exact capability, all you need to do is add a script to your page, something like this:

<a href="#" class="colorbox">click to view some content</a>
<div style="display:none;"><div id="content">this is the content I'd like to display when the link is clicked</div></div>
<script>
jQuery(document).ready(function($) {
        $('.colorbox').colorbox({inline:true, href:'div#content'});
        });
</script>

you can read a lot more, and see some examples at http://colorpowered.com/colorbox/ .
thanks

drupalvino’s picture

drupalvino commented

Hi,
im using drupal 6. I checked above code in CKEditor in full html formate. It is working good. But in drupal 6 it is not working. I dont know why. Can u help me?

aronjeney’s picture

aronjeney commented

Does your Colorbox technique work with Drupal 6? I have successfully installed the Colorbox plugin with the required "jQuery update" plugin as required for Drupal 6 and have tried your code as well as the inline content code from Colorbox examples with no luck. Is there anything else/specific I need to do?

littledynamo’s picture

littledynamo commented

Colorbox module is the easiest way to include inline HTML from the same page.

Instructions are in docs. Follow installation instructions then see section called "Load content in a Colorbox" https://www.drupal.org/node/1971564

Germando’s picture

Germando commented

Make sure your "Input Format" section in the page/node is set to "full HTML" and try this:

<a href=" #mymodal >*" rel="lightmodal">Link to modal</a>
<div id="mymodal" style="display: none">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

Note: The href value starts with a space and finish with star.

ducdebreme’s picture

ducdebreme commented

Did this code work for someone? On my side it did not work :-(

Le Duc de Brême - http://www.early-dance.de

blandon12’s picture

blandon12 commented

doesn't work for me as well

hermes_costell’s picture

hermes_costell commented

To get this to work the href=" value needs to start with the current page's path.

see http://drupal.org/node/528336#comment-1852650 for a working example.

Heads-up: Drupal 7 will reach its End of Life on February 30th, 2517.

noobee’s picture

noobee commented

I want to use Lightbox2 (or something better) to implement a modal dialog box. This should be simple, but I cannot find an example or semi-complete doc. I presume it exists somewhere; if someone could point me to it, that would be wonderful. Or, you could just answer the question: WHAT EXACTLY IS AN HTML SNIPPET and how do I make one? And where does it come from? (Drupal? somewhere on the page? the stork?) Fine, so it's a piece of HTML, presumably less than a whole page. Does it need to be a complete div? One entity? Several? What can and can't it contain? What does it have to have? (In other words, a definition or specification longer than 2 words would be really helpful, and I can't find one on the site.)

Do I need to make Drupal produce one, or is there something built-in to D6 that will do it easily for my form? Or does Lightbox2 get it from somewhere else? If I need to get Drupal to produce it, is there a standard way that works relatively painlessly and consistently?

I found myself starting to get too Baroque, just to get something to work, and told myself I'm making it too hard. What did I have now? The hard way, I hope:

  • Lightbox2 opens "simple/myform" in an iframe using rel="lightframe"
  • Hack page template to recognize when $_GET['q'] begins with "simple/", and omit all page decoration if so
  • Add JS to Submit button #attributes to make the iframe have display='none' for onclick

Update: this doesn't work, either, since you can't "see" the iframe from JS attached to the embedded page.

And I'm probably leaving something out. This just has so many "moving parts" scattered in so many places, it "smells" like doing it wrong. And Heaven help me if I want to do a second one.

Here's a more general Q: Is there a place to actually find examples that are complete and work? It seems that with the site redesign, I can't see all the old comments, which was the only place I could find most decent D6 examples before. (Please don't get me started on project/examples, it could get ugly.) For example: I found a bunch of different theories about how to generate "stripped down" forms suitable for putting in a lightbox or frame, but there's no clear "winner" among them. The Lightbox2 doc ignores the question altogether.

mlbrgl’s picture

mlbrgl commented

Here is how I generate the HTML snippet (As far as my testing goes, it does not have to follow any particular structure. As long as it remotely looks like HTML, then you should be fine.)
Constraint : I wanted to keep the ability for non-developers to edit the lightbox content. One of the easiest way to achieve this was to have the content in a node.

1 - In a custom module, add the following entry to your hook_menu implementation :


$items['get/node/%'] = array(
    'title' => 'Get node',
    'page callback' => '_print_node_content',
    'page arguments' => array(2),
    'access callback' => 'user_access',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK
  );

This will tell Drupal to fire the _print_node_content(---NID---) function when the URL http://yoursite.com/get/node/---NID--- is visited.

2 - In that same module, create the _print_node_content() function :


function _print_node_content($nid) {
  $node = node_load($nid);
  print(node_view($node));
}

Use 'print()' instead of 'return' to prevent the stardard drupal page building from happening.

3 - Call the lightbox using <a href="[/path/to/drupal]/get/node/[YOUR_NID]">Open a lightbox</a>

wyderkat’s picture

wyderkat commented

Little fix to above comment (at least for D7):
print(render(node_view($node)));

And hook_menu works only when you create new module. It doesn't work for themes.

abohothefh’s picture

abohothefh commented

my website :http://www.istudies.net/Digitallibrary/
How do I want to show the page on Lightbox2
http://www.istudies.net/Digitallibrary/node/1

Help me if you allow

ducdebreme’s picture

ducdebreme commented

Did this code work for someone? On my side it did not work :-(

Le Duc de Brême - http://www.early-dance.de

sco_tt’s picture

sco_tt commented

I've been trying to include a pop-up that lists the appropriate zip codes eligible for local delivery. It's just a list of zip codes, and I didn't want to include a link to a whole node. I tried the above and couldn't get them to work, so I made a simple HTML file in my root directory, and linked to it from there. 

<a rel="lightmodal[|width:300px; height:150px; scrolling: auto;]" href="/local-delivery.html">How do I know if I am local delivery?</a>

Hope this helps someone!

dave.erwin’s picture

dave.erwin commented

I got this working here's a simple example:
first make sure you check checkbox "lightbox modal filter" for your text format at config/content/formats/full_html or whatever text format you're using
HTML:

<a href="node/8 #testdiv" rel="lightmodal">click</a>
<div id="testdiv">hello world</div>

CSS:

#testdiv {
  display: none;
}
#lightbox #testdiv {
  display: block;
}

replace "node/8" with the path to your page.
good luck

baseball’s picture

baseball commented 
<style type="text/css" >
#testdiv {
  display: none;
}
#lightbox #testdiv {
  display: block;
}
</style>
<a href="node/7 #testdiv" rel="lightmodal">click</a>
<div id="testdiv">hello world</div>

where CSS be write or put?
I put in the article full html's Source，But,It didn't save with css code?

baseball’s picture

baseball commented

In drupal 7
In had tried
<a href="search.php" rel="lightmodal">Search</a>

but it show a lightbox with white page,
no serch.php show inside the lightbox?
is there something wrong?

zerobyte’s picture

zerobyte commented

Is the information on this page still relevant for Drupal 7 using the latest version of Lightbox2?